$ scope nie działa w moim kontrolerze nav bar?

Moja aplikacja Angular została opracowana przy użyciu szablonu opisowego tego yeoman generator.

Routing i wszystkie rzeczy działają dobrze, ale nie mogłem dostać się do pracy $ scope tylko na navbar-controller.js i footer-controller.js. Proszę mi powiedzieć, czy potrzebujesz więcej informacji, aby dać o tym znać.

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>

paska nawigacyjnego-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"); 
    } 
    } 
}());

paska nawigacyjnego-module.js

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

paska nawigacyjnego-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' 
     }); 
    } 
}());

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> 
.... 
.....

Aktualizacja: znalazłem odpowiedź. Dziękuje wszystkim. Chciałbym wiedzieć, że w innych kontrolerach nie wstrzykiwanie $ zakres, ponieważ używam kontrolera jako składni, a także działa idealnie. Czy ktoś może wyjaśnić powód tego, dlaczego tylko w navbadzie muszę wstrzyknąć $ scope?

Źródło

2016-08-17 happycoder

plz oznaczyć każdą poprawną odpowiedź, jeśli pomogło. –

Masz init i wstrzyknąć $ zakres tak:

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

OR:(tylko wyodrębnić kontrolera głównego funkcja)

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

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

})();

@UPDATE:

Prawdopodobnie średnie kontrolery dyrektyw? W takim przypadku $ zakres s są inicjowane i wstrzykiwane automatycznie, wystarczy pamiętać, aby dodać $ zakres jako argument do funkcji kontrolera. To wszystko.

Źródło

2016-08-17 11:22:59 Damiano

Dziękuję bardzo. Ten fragment kodu działał, ale chciałbym wiedzieć w innych kontrolerach, że nie wstrzykiwam $ scope, ponieważ używam kontrolera jako składni i to działało idealnie. Czy możesz to wyjaśnić? – happycoder

Jak kontrolery w dyrektywie? Tak, obiekt $ scope jest wstrzykiwany automatycznie, wystarczy podać go jako argument - tak to rozumiem :) – Damiano

wstrzyknąć $scope w swoim NavBar-controller.js

(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"); 
    } 
    } 
}());

Źródło

2016-08-17 11:19:33

Jesteś popularny, twoja odpowiedź jest kopiowana :) – Damiano

Będziesz musiał wstrzyknąć $ zakres w swoim NavBar-controller.js (pamiętaj Dependency injection?) Tak: -

(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"); 
    } 
    } 
}());

Źródło

2016-08-17 11:33:04

trzeba wstrzyknąć $scope jako usługa w kontrolerze tak:

kontroler nawigacji.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"); 
    } 
    } 
}());

Jeszcze lepszym rozwiązaniem jest przekazać usługi w tablicy, tak robiąc, że pojawi się bardziej bezpieczne w takich przypadkach minifikacji od nazwy nie zostaną nadpisane.

navbar-kontroler-tablica-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"); 
    } 
    } 
}());

Upewnij się, że wstrzykiwanie usługi w tej samej kolejności, w jakiej jesteśmy w kontrolerze.

Mam nadzieję, że to pomaga.

Źródło

2016-08-17 11:38:46

Dziękuję bardzo za odpowiedź. Jeśli możesz proszę wyjaśnić przyczynę tego problemu (zobacz sekcję dotyczącą aktualizacji w moim pytaniu) – happycoder

$ scope nie działa w moim kontrolerze nav bar?

Odpowiedz

Powiązane problemy