2016-01-29 10 views
5

में एकल पृष्ठ में एकाधिक नियंत्रक को कैसे जोड़ें I AngularJS में नया हूं मुझे इस कोड में कोई समस्या है। मैं एकल ng-app में एकाधिक नियंत्रक जोड़ना चाहता हूं। लेकिन यह पहले एक निष्पादित करता है। दूसरा क्यों नहीं?AngularJS

<!DOCTYPE html> 
<html ng-app="myapp"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angul /1.4.8/angular.min.js"></script> 
</head> 
<body> 
    <div ng-controller="cont1"> 
     <input type="text" ng-model="fullname"> 
     {{fullname}} 
    </div> 
    <div ng-controller="cont2"> 
     <input type="text" ng-model="fname"> 
     {{fname}} 
    </div> 
    <script> 
     var app = angular.module("myapp", []); 
     app.controller('cont1', function ($scope) { 
      $scope.fullname = ""; 
     }); 
     var new = angular.module('myapp', []); 
     new.controller('cont2', function ($scope) { 
      $scope.fname = ""; 
     }); 
    </script> 
</body> 
</html> 

उत्तर

7

क्योंकि आप पहली बार myapp मॉड्यूल अधिलेखित कर रहे हैं जब आप var new= angular.module('myapp',[]); है।

आपका कोड होना चाहिए:

var app = angular.module("myapp", []); 
app.controller('cont1', function($scope) { 
    $scope.fullname = ""; 
}); 
app.controller('cont2', function($scope) { 
    $scope.fname = ""; 
}); 

या

var app = angular.module("myapp", []); 
app.controller('cont1', function($scope) { 
    $scope.fullname = ""; 
}); 
angular.module("myapp").controller('cont2', function($scope) { 
    $scope.fname = ""; 
}); 

दूसरा पैरामीटर []module() के लिए पारित फर्क नहीं पड़ता

+2

आप पैरामीटर [] के बारे में पूरी तरह से सही हैं। लेकिन यह वाक्यविन्यास बेहतर है (var ऐप का उपयोग न करें): 'angular.module ("myapp", []); angular.module ("myapp")। नियंत्रक ('cont1', फ़ंक्शन ($ स्कोप) {...}); angular.module ("myapp")। नियंत्रक ('cont2', फ़ंक्शन ($ स्कोप) {...}); ' – AlainIb

0
you can define multiple controllers in single module in this way also 

    angular.module("myapp",[]); 
    .controller('cont1',function($scope){ 
     $scope.fullname=""; 
     }); 

    .controller('cont2',function($scope){ 
    $scope.fname=""; 
    }); 

जब आप को परिभाषित कर रहे मॉड्यूल का उपयोग नहीं करते var आप नियंत्रकों, निर्देशों, कारखानों आदि को परिभाषित करने के लिए यहाँ Angular Style Guide/Best Practices

0

कोणीय सर्वोत्तम प्रथाओं में से कुछ का सबसे अच्छा तरीका करने के लिए मिल सकता है ...

एक अलग फाइल

अनुप्रयोग में अपने मॉड्यूल के नाम को परिभाषित है। module.js

angular.module("myapp",[]); // inside [] you define your module dependencies 

नियंत्रकों के लिए (आपकी आवश्यकता के आधार पर भी आप 1 1 नियंत्रक के लिए फ़ाइल बना सकते हैं) अलग फ़ाइल बनाने

some.controller.js

angular.module("myapp").controller('someCtrl'['$scope', function($scope){ 

}]); 

angular.module("myapp").controller('someOtherCtrl'['$scope', function($scope){ 

}]); 

नोट:

दो प्रकार आप नियंत्रक लिख सकते हैं

TYPE1 (सिफारिश नहीं)

.controller('ctrlName', function($scope){ 

}); 

type2 (सिफारिश)

.controller('ctrlName', ['$scope', function($scope){ 

}]); 

कारण

तो तुम type2 हम एक सरणी में नियंत्रक निर्भरता से गुजर रहे हैं में देख सकते हैं, इसलिए जब हम कोणीय नाम के रूप में दे देंगे हमारे कार्यक्रम संकलन उदाहरण: फंक्शन() के अंदर एक से $ गुंजाइश और इसे $ स्कोप के रूप में मानें।

TYPE1 के साथ आपको नियंत्रक निर्भरता को परिभाषित करते समय विशिष्ट क्रम का पालन करने की आवश्यकता है अन्यथा कोणीय त्रुटि के माध्यम से होगा क्योंकि इस दृष्टिकोण में कोणीय केवल पहली निर्भरता को $ जेलकोप के रूप में मानता है, दूसरा $ गुंजाइश के रूप में और इसी तरह ....

उदाहरण के लिए:

आप इस

.controller('ctrlName', function($http, $scope) { 

}); 

की तरह अपने नियंत्रक के लिए उनकी निर्भरता पारित नहीं हो सकता है अगर आप इस

.controller('ctrlName', function($scope, $http) { 

    }); 

तरह परिभाषित त्रुटि

फेंक होगा यह क्रम में ठीक से काम करेगा टी टोपी कोणीय चाहता है।