1

$scope を注入することなく、コントローラーの親スコープにアクセスする方法が必要でした。この背後にある理由は、私が SPA を構築していて、現在のページに応じて body 要素にクラスを適用したかったからです。クラスを変更するためだけに、すべてのコントローラーに $scope を注入する必要はありません。また、$routeprovider やサービスを使用してこの機能をカプセル化する方法があれば、これを間違った方法で見ている場合はお知らせください。最近Angularを使い始めたばかりなので、解決策が本当に簡単な場合は事前にお詫び申し上げますが、グーグルで私の状況に似たものを見つけることができませんでした.

基本的なセットアップは次のとおりです。

index.html

<body ng-controller="BodyController as body" class="contact-page">
    <nav> ... </nav>
    <main ng-view>
        <div ng-controller="ContactController as contact>
           Contact Page loaded in on click
        </div>
    </main>
</body>

body.controller.js

(function() {
    angular
        .module('app')
        .controller('BodyController', BodyController);

    function BodyController() {
        var body = this;
    }
})();

contact.controller.js

(function() {
    angular
        .module('app')
        .controller('ContactController', ContactController);

    ContactController.$inject = [];

    function ContactController($scope) {
        var vm = this;
    }
})();

app.routes.js

(function () {
    angular
        .module('app')
        .config(routes);

    routes.$inject = ['$routeProvider', '$locationProvider'];

    function routes($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/home/home.html',
                controller: 'HomeController',
                controllerAs: 'home'
            }).when('/contact', {
                templateUrl: 'app/contact/contact.html',
                controller: 'ContactController',
                controllerAs: 'contact'
            }).otherwise({
                redirectTo: '/'
            });
        $locationProvider.html5Mode(true);
    }

})();
4

0 に答える 0