$ scope не работает в моем контроллере навигатора?

My Angular app разработан с использованием шаблона этого yeoman generator.

Маршрутизация и все, что работает нормально, но я не смог добраться до рабочего объема только на navbar-controller.js и нижнем-контроллере.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>

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

NavBar-module.js

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

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

Update: Я нашел ответ. Всем спасибо. Я хотел бы знать, что в других контроллерах я не впрыскиваю $ scope, так как я использую контроллер как синтаксис, а также он работает отлично. Может кто-нибудь объяснить причину этого, почему только в navbar мне нужно ввести $ scope?

источник

2016-08-17 happycoder

PLZ отметить любой ответ правильно, если это помогло. –

Вы должны инициализировать и придать $ объем примерно так:

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

ИЛИ:(просто распакуйте диспетчерское основной функция)

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

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

})();

@UPDATE:

Вы, вероятно, означают контроллеры директив? В этом случае $ scope s инициализируются и вводятся автоматически, вам просто нужно запомнить, чтобы добавить $ scope в качестве аргумента функции вашего контроллера. Это все.

источник

2016-08-17 11:22:59 Damiano

Большое спасибо. Этот фрагмент кода работал, но я хотел бы знать, что в других контроллерах я не впрыскиваю $ scope, так как я использую контроллер как синтаксис и он работал идеально. Не могли бы вы объяснить это? – happycoder

Как контроллеры в директиве? Да, объект $ scope вводится автоматически, вам просто нужно передать его в качестве аргумента - вот как я его понимаю :) – Damiano

впрыснуть $scope в ваших 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"); 
    } 
    } 
}());

источник

2016-08-17 11:19:33

Вы популярны, ваш ответ копируется :) – Damiano

Вам придется вводить $ объем в ваших NavBar-controller.js (помните Dependency injection?), Как это: -

(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 в качестве службы в контроллере, как это:

navbar-контроллер.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"); 
    } 
    } 
}());

Еще лучше практика, чтобы передать услуги в массиве, так что, делая это, вы получите более безопасным в таких случаях, как минификация, так как имена не будут перекрываться.

Navbar-контроллер массив 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 не работает в моем контроллере навигатора?

ответ

Смежные вопросы