मेरे एंगुलरजेएस निर्देशों का दायरा क्यों साझा कर रहे हैं?

मैंने एक सरल निर्देश बनाने की कोशिश की है जो एक नाम प्रदर्शित करता है और इसे बदलने की अनुमति देता है। जब मैं नाम पृष्ठ पर एकाधिक निर्देश डालता हूं तो वे सभी नाम विशेषता साझा करते हैं। मैं क्या गलत कर रहा हूं?मेरे एंगुलरजेएस निर्देशों का दायरा क्यों साझा कर रहे हैं?

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<meta charset=utf-8 /> 
<title></title> 

    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script> 
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-resource.min.js"></script> 
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.min.js"></script> 
    <script> 
    var app = angular.module('app', []); 

    app.directive('person', function() { 

    function link ($scope, elem, attrs, ctrl) {  

     $scope.name = "OLD"   

     $scope.setName = function() { 
      $scope.name = 'NEW'; 
     } 
    } 

    return { 
     restrict: 'E', 
     replace: true, 
     template: "<span>Current name = {{name}}<a href='' class='btn' ng-click='setName()'>Change name</a><br></span>", 
     link : link, 
    } 

    }); 

    app.controller('MainCtrl', function ($scope) { }); 

    </script>  

</head> 

<body ng-controller='MainCtrl'> 
    <person></person><br> 
    <person></person><br> 
    <person></person><br> 
    <person></person><br> 
</body> 

</html>

स्रोत

2013-11-04 nickponline

सभी अपने निर्देश शेयर एक ही दायरे के उदाहरण के बाद से वे अलग-अलग क्षेत्रों का उपयोग न करें। चेक-आउट [निर्देश दस्तावेज] (http://docs.angularjs.org/guide/directive), "निर्देश का दायरा अलग करना" अनुच्छेद –

पिछले जवाब में उल्लेख किया है, AngularJS निर्देशों के डिफ़ॉल्ट व्यवहार गुंजाइश है कि वे में शामिल किए गए साझा करने के लिए है। यह व्यवहार निर्देश परिभाषा वस्तु में scope पैरामीटर के माध्यम से बदला गया है।

आप AngularJS दस्तावेजों के इस खंड में गुंजाइश तर्क के लिए दस्तावेज़ देख सकते हैं: http://docs.angularjs.org/api/ng.$compile#description_comprehensive-directive-api_directive-definition-object

यह तर्क तीन विकल्प हैं:

scope: false - गुंजाइश निर्देश साझा करने के डिफ़ॉल्ट व्यवहार
scope: true में शामिल है - निर्देश है कि अन्य बच्चे स्कोप और उसके माता पिता से विरासत में मिली prototypically तरह काम करता है के लिए एक नया गुंजाइश बनाने गुंजाइश
- Example 1
scope: {} देखें - एक अलग गुंजाइश है कि prototypically अपनी मूल दायरे से विरासत नहीं है बनाने
- देखें Example 2

जैसा कि आप जेएसबीन उदाहरणों के साथ देख सकते हैं, विकल्प 2 और 3 दोनों आपके उदाहरण के लिए काम करेंगे। अंतर यह है कि क्या आप अपने नए स्कोप अलग करना चाहते हैं या नहीं।AngularJS Guide: Isolating the Scope of a Directive

स्रोत

2013-11-04 19:31:18

डिफ़ॉल्ट रूप से यदि आप निर्देश के दायरे को अलग नहीं करते हैं तो आप अपने व्यक्ति के निर्देश के सभी उदाहरणों के साथ "बाहरी" दायरे साझा करेंगे। आपके वर्तमान कार्यान्वयन के साथ आपको इस तरह के निर्देश का पुन: उपयोग करने के लिए प्रत्येक बार एक अलग नियंत्रक बनाना होगा।

लेकिन इस दोष के लिए एक समाधान है और यह अलग गुंजाइश कहा जाता रहा है। ऐसा करने के लिए, तुम इतनी तरह एक निर्देश की गुंजाइश विकल्प का उपयोग कर सकते हैं:

return { 
    restrict: 'E', 
    replace: true, 
    scope : {}, // this is where the magic happens 
    template: "<span>Current name = {{name}}<a href='' class='btn' ng-click='setName()'>Change name</a><br></span>", 
    link : link, 
}

आप अधिक here अनुभाग पूर्ण उदाहरण और explenation एक निर्देशक

स्रोत

2013-11-04 19:05:36

डिफ़ॉल्ट रूप से की गुंजाइश अलग है, निर्देशों ही हिस्सा गुंजाइश। लेकिन यदि आवश्यक हो, तो आप अपने निर्देशों के लिए अलग-अलग दायरे का उपयोग कर सकते हैं: scope: {} का उपयोग अपनी निर्देश परिभाषा में फ़ील्ड के रूप में करें।

app.directive('person', function() { 

    function link ($scope, elem, attrs, ctrl) {  

     $scope.name = "OLD"   

     $scope.setName = function() { 
      $scope.name = 'NEW'; 
     } 
    } 

    return { 
     restrict: 'E', 
     scope: {} 
     replace: true, 
     template: "<span>Current name = {{name}}<a href='' class='btn' ng-click='setName()'>Change name</a><br></span>", 
     link : link, 
    } 

    });

स्रोत

2013-11-04 19:06:11

आप AngularJS निर्देशों

false में scope के लिए 3 विकल्प हैं (:

AngularJS गाइड के निर्देश खंड क्यों अलग गुंजाइश निर्देशों के साथ बेहतर पुन: प्रयोज्य मॉड्यूल बना मदद कर सकते हैं पर एक अच्छा अनुभाग है माता-पिता का दायरा उपयोग करता है)
true (अपने दायरे को बनाता है और माता-पिता से विरासत भी प्राप्त करता है, यानी आप माता-पिता के दायरे में परिभाषित वस्तुओं तक पहुंच सकते हैं)
{}

मुझे इस का प्रदर्शन का उपयोग कर $ rootScope

app.run(function($rootScope){ 
     $rootScope.firstname = "Root scope name"; 
     $rootScope.rootValue = "Root value"; 
    }); 

    app.directive("sampleDirective",function(){ 
     return{ 
     template:"<div>{{firstname}}{{rootValue}}</div>", 
// here rootValue will be accessible as its inherited from parent. You can overwrite this as well 
     scope : true, 
     controller:['$scope',sampleDirectiveScope] 
     }; 
    }); 

    function sampleDirectiveScope($scope){ 
     $scope.firstname = "child scope changing name - "; 
    }; 

    app.directive("isolatedScopeDirective",function(){ 
     return { 
     controller:isolatedFunction, 
     template:" this has isolated scope ,<div>{{rootValue}}</div>", 
    // here rootValue will not be accessible because it is isolated and not inheriting from parent 
     scope: {} 
     }; 
    }); 

    function isolatedFunction($scope){ 
     //define values for this scope 
    };

चेक करते हैं (एक अलग गुंजाइश बनाता है) इस live demo

स्रोत

2017-02-22 10:11:14

मेरे एंगुलरजेएस निर्देशों का दायरा क्यों साझा कर रहे हैं?

उत्तर

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