निर्देशक

एंगुलरजेएस का उपयोग करके विशेषता बदलें। मेरे पास एक निर्देश है कि मैं दो तरह के डेटा बाइंडिंग करना चाहता हूं। निर्देश में "सक्रिय" नामक एक विशेषता होगी। प्रारंभ में, "सक्रिय" का मान "1" होगा।निर्देशक

निर्देशक का लिंक फ़ंक्शन जांच करेगा कि "सक्रिय" "1" के बराबर है या नहीं। यदि ऐसा है, तो यह "सक्रिय" को 0 पर बदल देगा, लेकिन कुछ अन्य सामान करें।

बाद में, यदि मैं नियंत्रक में कुछ सामान फिर से करने का निर्देश चाहता हूं, तो मैं फिर से "सक्रिय" को "1" में बदल दूंगा। चूंकि निर्देश में घड़ी है, यह चक्र को दोहराएगा।

दुर्भाग्यवश, हर बार जब मैं ऐसा करता हूं, तो मुझे "अभिव्यक्ति '0' निर्देश के साथ प्रयोग किया जाता है 'testDirective' असाइन करने योग्य नहीं है!" या "गैर-असाइन करने योग्य मॉडल अभिव्यक्ति: 1 (निर्देश: testDirective)"।

<body ng-app="app"> 
    <test-directive activate="1"></test-directive>  
</body>

यहाँ जेएस है:

यहाँ HTML है

var app = angular.module('app', []); 


app.directive('testDirective', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      activate : '=' 
     }, 


     link: function(scope, elem, attrs, controller) { 
      var el = elem[0]; 

      var updateContent = function() { 
       el.innerText = 'Activate=' + scope.activate; 
      }; 

      updateContent(); 
      attrs.$observe('activate', function() { 
       console.log('Activate=' + scope.activate); 
       if(scope.activate == '1') { 
        scope.activate = '0' 
        updateContent(); 
       } 
      }); 
     } 
    } 
});

यहाँ

यह jsFiddle पर है: http://jsfiddle.net/justbn/mgSpY/3/

मैं निर्देश के विशेषता में संग्रहीत मूल्य नहीं बदल सकते हैं क्यों ? मैं 2 तरह बाध्यकारी का उपयोग कर रहा हूँ।

दस्तावेज़ कहते हैं, "यदि मूल दायरे की संपत्ति मौजूद नहीं है, तो यह एक NON_ASSIGNABLE_MODEL_EXPRESSION अपवाद फेंक देगा।"

नोट: अद्यतन सामग्री ठीक से "सक्रिय" का मान दिखाती है। हालांकि, "सक्रिय" का मान "" अद्यतन नहीं होता है।

हालांकि यह मेरे लिए कोई समझ नहीं आता है क्योंकि मूल दायरे की संपत्ति मौजूद है।

कोई विचार?

स्रोत

2013-09-06 Justin

हालांकि मैं के बजाय $watch के उपयोग से सहमत हूं, जो आपको प्राप्त होने वाले त्रुटि संदेश का मुख्य कारण नहीं है।Non-assignable model expression: 1 (directive: testDirective)

इस मामले में गैर-आबंटित अभिव्यक्ति है संख्या "1"

: के रूप में त्रुटि संदेश आपको बताता है -

समस्या

है कि आप एक गैर-आबंटित अभिव्यक्ति को कोई मान निर्दिष्ट करने के लिए कोशिश कर रहे हैं

<test-directive activate="1">

आप निर्देश के लिए प्रारंभिक मूल्य (1) पारित करने के लिए प्रबंधन, लेकिन विशेषता को सक्रिय किए जाने के निर्देश है कि मूल्य को अद्यतन करने की कोशिश करता है बदला नहीं जा सकता - क्योंकि यह एक संख्या है।

तो आपको एक चर में बदलने के लिए क्या करना है, ताकि आप बाद में मूल्य अपडेट कर सकें।

नीचे दिए गए कोड को देखें जहां मैं एक नियंत्रक के माध्यम से activate.initialValue नामक $ स्कोप में एक चर प्रारंभ करता हूं।

और मैंने attrs.$observe के बजाय $watch का भी उपयोग किया है।

मैंने $timeout को केवल 2 सेकंड के बाद सक्रिय मान बदलने के लिए एक ईवेंट अनुकरण करने के लिए जोड़ा है।

एचटीएमएल

<body ng-app="app" ng-controller="appCtrl"> 
    <test-directive activate="activate.initialValue"></test-directive>  
</body>

जे एस

var app = angular.module('app', []); 

app.controller('appCtrl', function($scope){ 
    $scope.activate = { 
     initialValue : 1 
    } 
}); 

var app = angular.module('app', []); 

app.controller('appCtrl', function($scope){ 
    $scope.activate = { 
     initialValue : 2 
    } 
}); 

app.directive('testDirective', function($timeout) { 
    return { 
     restrict: 'E', 
     scope: { 
      activate : '=' 
     },  
     link: function(scope, elem, attrs) { 
      scope.$watch('activate', function(newValue, oldValue){ 
       console.log('activate has changed', newValue); 
      }); 

      $timeout(function(){ 
        scope.activate = 0;  
       }, 2000); 
     }, 
     template: "{{activate}}" 
    } 
});

आप यहां (http://jsfiddle.net/mgSpY/63/) काम कर देख सकते हैं।

और यहाँ यह है कि यह (http://docs.angularjs.org/error/ngModel:nonassign) के बारे में AngularJS आधिकारिक दस्तावेज है

स्रोत

2013-09-06 23:07:22

dluz: मैंने माइकल को एक समाधान समाधान के लिए जवाब दिया था। लेकिन मैंने इसे अभी बदल दिया है। आपने इसे समझाया ताकि मैं इसे बेहतर समझ सकूं। बहुत बहुत धन्यवाद! – Justin

जस्टिन: मदद करने में खुशी! :) –

यह मेरे लिए जवाब का हिस्सा था। मुझे भी गुंजाइश चलाना पड़ा। $ इसे लागू करने के बाद लागू करें(), या $ घड़ी ट्रिगर नहीं होगी। – LucasBeef

दायरे की संपत्ति पर नजर रखने के लिए, आपको attrs.$observe के बजाय scope.$watch उपयोग करना चाहिए:

link: function(scope, elem, attrs, controller) { 
    var el = elem[0]; 

    var updateContent = function() { 
    el.innerText = 'Activate=' + scope.activate; 
    }; 

    scope.$watch('activate', function(value) {        
    console.log('Activate=', value); 
    if(value === 1) { 
     scope.activate = '0'      
    } 
    updateContent(); 
    }); 
}

jsFiddle here।

सूचना है कि मैं लिंक समारोह से updateContent कॉल हटा दिया है, क्योंकि आप केवल सुरक्षित रूप से, एक $watch कॉलबैक अंदर गुंजाइश की संपत्ति का उपयोग कर सकते हैं जब तक आप सुनिश्चित कर सकते हैं कि है कि संपत्ति के लिए बाध्य मूल्य के निर्देश से पहले उपलब्ध है कोणीय द्वारा संसाधित किया जाता है।

$observe केवल डीओएम विशेषता के मान परिवर्तनों को देखने/देखने के लिए उपयोग किया जाना चाहिए जिसमें इंटरपोलेशन (उदाहरण के लिए, value="{{ value }}") शामिल है। इसे बेहतर समझने के लिए यह SO question देखें।

स्रोत

2013-09-06 22:53:41

माइकल: धन्यवाद जवाब के लिए बहुत बहुत। यह निश्चित रूप से अब ठीक से काम करता है। मैं बिल्कुल समझ नहीं पा रहा हूं कि 'scope.activate = 0' का उपयोग कैसे किया जाता है लेकिन पहले नहीं था। मैं अभी भी वही विशेषता का मूल्य बदल रहा हूं। – Justin

मैं अधिक जानकारी के साथ उत्तर अद्यतन करूंगा। उम्मीद है कि यह चीजों को साफ़ करेगा। –

निर्देशक

उत्तर

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