$ scopeがナビゲーションバーコントローラで機能していませんか？

My Angularアプリは、yeoman generatorという定型文を使用して開発されました。

ルーティングとすべてのものは、細かい作業が、私は、ナビゲーションバー-controller.jsとフッター-controller.jsにのみ$範囲を作業に取得することができませんでした。これについての手がかりを与えるために、より多くの情報が必要な場合は教えてください。

Index.htmlと

<!DOCTYPE html> 
<html lang='en' data-ng-app='app'> 
    <head> 
    <title>App</title> 
    <meta name='viewport' content='width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes'> 
    <!-- inject:head:js --> 
    <!-- endinject --> 
    <!-- inject:html --> 
    <!-- endinject --> 
    <!-- bower:css --> 
    <!-- endbower --> 
    <!-- inject:css --> 
    <!-- endinject --> 
    </head> 
    <body class="wrapper"> 

    <div ng-controller="NavbarCtrl" ng-include="'navbar/navbar.tpl.html'"></div> 

    <!-- boxed-layout --> 
    <div class='container'> 

     <!--=== Main Content ===--> 
     <div data-ui-view></div> 
     <!--=== End Main Content ===--> 

    </div> 

    <!-- <div id="footer" 
     ng-controller="FooterCtrl" ng-include="'footer/footer.tpl.html'"> 
    </div> --> 

    <!-- bower:js --> 
    <!-- endbower --> 
    <!-- inject:js --> 
    <!-- endinject --> 
    </body> 
</html>

ナビゲーションバー-controller.js

(function() { 
    'use strict'; 

    angular 
    .module('navbar') 
    .controller('NavbarCtrl', NavbarCtrl); 

    function NavbarCtrl() { 
    var vm = this; 
    vm.ctrlName = 'NavbarCtrl'; 

    this.loginHeader = function(){ 
     console.log("LOGIC called"); 
    } 
    } 
}());

ナビゲーションバー-module.js

(function() { 
    'use strict'; 
    angular 
    .module('navbar', [ 
     'ui.router' 
    ]); 
}());

ナビゲーションバー-routes.js

(function() { 
    'use strict'; 

    angular 
    .module('navbar') 
    .config(config); 

    function config($stateProvider) { 
    $stateProvider 
     .state('navbar', { 
     url: '/navbar', 
     templateUrl: 'navbar/navbar.tpl.html', 
     controller: 'NavbarCtrl', 
     controllerAs: 'navbar' 
     }); 
    } 
}());

ナビゲーションバー-trl.html

.... 
..... 
<li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Search</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li ng-hide="navbar.isLoggedIn"><a ui-sref="login">Login {{navbar.ctrlName}}</a></li> 
     <li ng-hide="navbar.isLoggedIn" ><a ui-sref="register">Signup</a></li> 
     <li ng-show="navbar.isLoggedIn"><a>Logged as {{navbar.username}}</a></li> 
     <li ng-show="navbar.isLoggedIn"><a ui-sref="login">Logout</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
.... 
.....

更新： 私は答えを見つけました。みんなありがとう。他のコントローラでは、シンタックスとしてコントローラを使用しているので、$ scopeを注入していないことも知っています。また、完璧に動作しています。誰でもこの背後にある理由を説明してください、なぜ私は$ scopeを注入する必要があるのですか？

出典

2016-08-17 happycoder

plz助けがあれば正しい答えをマークしてください。 –

を注入し、そのように$スコープを挿入します

(function(){ 
    'use strict'; 
    angular.module('navbar') 
    .controller('NavbarCtrl', ['$scope', 'otherDependecy', function($scope, otherDependecy){ 
     yourAwesomeCodeGoesHere(); 
     $scope.someObject = 'Hello world'; 
    }]); 
})();

OR：（単にコントローラのメインを抽出機能）

(function(){ 
    'use strict'; 
    angular.module('navbar') 
    .controller('NavbarCtrl', ['$scope', 'otherDependecy', NavbarCtrl]); 

    function NavbarCtrl($scope, otherDependecy){ 
     yourAwesomeCodeGoesHere(); 
     $scope.someObject = 'Hello world'; 
    } 

})();

@UPDATE：

あなたはおそらくディレクティブのコントローラを意味ですか？この場合、$ scopeは自動的に初期化され注入されますが、コントローラーの機能に引数として$ scopeを追加することを忘れないでください。それで全部です。

出典

2016-08-17 11:22:59 Damiano

ありがとう、このコードスニペットは働いていましたが、私はシンタックスとしてコントローラを使用しているので、私は$ scopeを注入していません。それは完璧に働いていた。あなたはそれを説明してもらえますか？ – happycoder

指令のコントローラに似ていますか？うん、$スコープオブジェクトが自動的に注入され、あなたは引数として渡す必要があります - これは私がそれを理解する方法です:) – Damiano

のinitにあなたが持っているあなたのナビゲーションバー-controller.jsで$scope

(function() { 
    'use strict'; 

    angular 
    .module('navbar') 
    .controller('NavbarCtrl','$scope', NavbarCtrl, $scope); // adding $scope in the 
                  //controller dependency list 

    function NavbarCtrl() { 
    var vm = this; 
    vm.ctrlName = 'NavbarCtrl'; 

    this.loginHeader = function(){ 
     console.log("LOGIC called"); 
    } 
    } 
}());

出典

2016-08-17 11:19:33

あなたは人気があります、あなたの答えはコピーされています:) – Damiano

あなたはこのように（Dependency injectionを覚えていますか？）あなたのナビゲーションバー-controller.jsで$スコープを注入する必要があります： -

(function() { 
'use strict'; 

angular 
    .module('navbar') 
    .controller('NavbarCtrl','$scope', NavbarCtrl); 

function NavbarCtrl($scope) { 
    var vm = this; 
    vm.ctrlName = 'NavbarCtrl'; 

    this.loginHeader = function(){ 
    console.log("LOGIC called"); 
    } 
    } 
}());

出典

2016-08-17 11:33:04

あなたはこのようなあなたのコントローラのサービスとして$scopeを注入する必要があります。

ナビゲーションバーコントローラ。JS

(function() { 
    'use strict'; 

    angular 
    .module('navbar') 
    .controller('NavbarCtrl', NavbarCtrl); 

    function NavbarCtrl($scope) { // $scope as a service of this controller 
    var vm = this; 
    vm.ctrlName = 'NavbarCtrl'; 

    this.loginHeader = function(){ 
     console.log("LOGIC called"); 
    } 
    } 
}());

より良い練習が名前が上書きされることはありませんので、あなたは縮小のようなケースでは、より安全に得ることをそうすることによって、配列内のサービスを渡すことです。

ナビゲーションバーコントローラアレイ-services.js

(function() { 
    'use strict'; 

    angular 
    .module('navbar') 
    .controller('NavbarCtrl', ['$scope', '$http', '$timeout', NavbarCtrl]); 

    function NavbarCtrl($scope, $http, $timeout) { // $scope as a service of this controller 
    var vm = this; 
    vm.ctrlName = 'NavbarCtrl'; 

    this.loginHeader = function(){ 
     console.log("LOGIC called"); 
    } 
    } 
}());

あなたは、彼らがコントローラにいるのと同じ順序でサービスを注入していることを確認します。

希望します。

出典

2016-08-17 11:38:46

こんにちはパウロ、非常に答えをありがとう。あなたがこれの背後にある理由を説明してください（私の質問の更新セクションを参照してください） – happycoder

$ scopeがナビゲーションバーコントローラで機能していませんか？

答えて

関連する問題