$ kapsamı nav çubuğu denetleyicimde çalışmıyor?

Angular uygulaması, bu yeoman generator ürününün bir boilerplate'i kullanılarak geliştirilmiştir.

Yönlendirme ve her şey gayet iyi çalışıyor ancak $ navbar-controller.js ve footer-controller.js üzerinde çalışmayı başaramadım. Bu konuda bir ipucu vermek için daha fazla bilgiye ihtiyacınız varsa lütfen bana bildirin.

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'ın 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'ın 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> 
.... 
.....

Güncelleme: Yanıt bulundu. Herkese teşekkürler. Diğer denetleyicilerinde, denetleyiciyi sözdizimi olarak kullandığımdan ve aynı zamanda mükemmel çalıştığından $ kapsamını enjekte etmediğimi bilmek isterim. Herkes bunun nedenini açıklayabilir mi, neden sadece navbarda $ kapsamı enjekte etmem gerekiyor?

kaynak

2016-08-17 happycoder

plz yardım ederse herhangi bir cevabı düzeltin. –

:(sadece kontrolör ana ayıklamak:

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

YA işlev)

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

@UPDATE: yönergelerin

You muhtemelen ortalama kontrolörler? Bu durumda $ kapsamı $ kapsamı başlatılır ve otomatik olarak enjekte edilir, sadece denetleyicinizin işlevine bir argüman olarak $ kapsam eklemeyi unutmayın. Bu kadar.

kaynak

2016-08-17 11:22:59 Damiano

Çok teşekkürler. Bu kod parçacığı çalışıyordu, ancak diğer denetleyicilerinde bilmek istiyorum Denetleyiciyi sözdizimi olarak kullandığım için $ kapsamını enjekte etmiyorum. Mükemmel çalışıyordu. Açıklayabilir misiniz lütfen? – happycoder

Yönergede bulunan denetleyiciler gibi mi? Evet, $ kapsam nesnesi otomatik olarak enjekte edilir, sadece bir argüman olarak aktarmanız gerekir - bunu nasıl anladım :) – Damiano

sizin navbar-controller.js içinde $scope enjekte Sen init ve şöyle $ kapsamını enjekte etmek zorunda

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

kaynak

2016-08-17 11:19:33

Yaygınsınız, cevabınız kopyalanıyor :) – Damiano

Böyle (? Dependency injection unutmayın) sizin navbar-controller.js yılında $ kapsamını enjekte etmek zorunda kalacak: -

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

kaynak

2016-08-17 11:33:04

Böyle controller içerisinde bir hizmet olarak $scope enjekte etmek zorunda:

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

Daha iyi bir uygulama adların overriden olmayacak çünkü küçültme gibi durumlarda daha güvenli olsun o yaparak, böylece bir dizide hizmet geçmektir.

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

onlar denetleyicisi konum aynı sırada hizmetlerini enjekte emin olun.

Yardım edin.

kaynak

2016-08-17 11:38:46

Merhaba Paulo, cevap için çok teşekkür ederim. Bunun arkasındaki sebebi açıklayabilirseniz lütfen (lütfen sorunuzdaki güncelleme bölümüne bakın) – happycoder

$ kapsamı nav çubuğu denetleyicimde çalışmıyor?

cevap

İlgili konular