$ एनओपी बार नियंत्रक में काम नहीं कर रहा है?

मेरा कोणीय ऐप इस yeoman generator के बॉयलरप्लेट का उपयोग करके विकसित किया गया है।

राउटिंग और सभी चीजें ठीक काम कर रही हैं लेकिन मैं केवल navbar-controller.js और footer-controller.js पर $ scope काम नहीं कर सका। कृपया मुझे बताएं कि क्या आपको इसके बारे में सुराग देने के लिए अधिक जानकारी चाहिए।

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

अद्यतन: मैं इस सवाल का जवाब मिल गया। आप सभी को धन्यवाद। मैं जानना चाहता हूं कि अन्य नियंत्रकों में मैं $ स्कोप इंजेक्शन नहीं दे रहा हूं क्योंकि मैं नियंत्रक के रूप में नियंत्रक का उपयोग कर रहा हूं और यह भी सही काम कर रहा है। क्या कोई इस के पीछे कारण बता सकता है, केवल नौसेना में मुझे $ स्कोप इंजेक्ट करने की आवश्यकता क्यों है?

स्रोत

2016-08-17 happycoder

कृपया किसी भी उत्तर को सही होने पर सही उत्तर दें। –

आप init और इतने की तरह $ गुंजाइश इंजेक्षन करने के लिए है:

(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:

आप शायद निर्देशों के मतलब नियंत्रकों? इस मामले में $ स्कोप एस प्रारंभ और स्वचालित रूप से इंजेक्शन दिए गए हैं, आपको बस अपने नियंत्रक के फ़ंक्शन के लिए $ स्कोप जोड़ने के लिए याद रखना होगा। बस इतना ही।

स्रोत

2016-08-17 11:22:59 Damiano

बहुत बहुत धन्यवाद। यह कोड स्निपेट काम कर रहा था, लेकिन मैं अन्य नियंत्रकों में जानना चाहता हूं कि मैं $ स्कोप इंजेक्शन नहीं दे रहा हूं क्योंकि मैं नियंत्रक के रूप में नियंत्रक का उपयोग कर रहा हूं और यह सही काम कर रहा था। क्या आप इसे समझा सकते हैं? – happycoder

निर्देश में नियंत्रकों की तरह? हाँ $ स्कोप ऑब्जेक्ट स्वचालित रूप से इंजेक्शन दिया जाता है, आपको बस इसे एक तर्क के रूप में पास करना होगा - इस तरह मैं इसे समझता हूं :) – Damiano

अपने नेवबार-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 इंजेक्षन करने के लिए है:

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

इससे भी बेहतर व्यवहार कर रही है कि आप minification तरह के मामलों में और अधिक सुरक्षित के बाद से नाम ओवरराइड नहीं किया जाएगा मिल द्वारा एक सरणी में सेवाएं पारित करने के लिए है, तो है।

नेवबार नियंत्रक सरणी-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

$ एनओपी बार नियंत्रक में काम नहीं कर रहा है?

उत्तर

संबंधित मुद्दे