कोणीय टेम्पलेट एनजी-छुपा

Question

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

.directive('buttonToggle', function() { 
       return { 
        restrict: 'A', 
        scope: { 
         myBtnArr: "=" 
        }, 
        template: '<button ng-click="click()">{{ myBtnTxt[myBtnArr] }}</button>', 
        link: function(scope) { 
         scope.myBtnTxt = ["AND", "OR", "NOT"]; 
         scope.click = function() { 
          scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0); 
         } 
        } 
       }; 
      }); 

फिर HTML कि काम करता है::

<div button-toggle my-btn-arr=0></div> 

और html स्निपेट वह काम नहीं करता:

<tr ng-show="rowsShown >= 2"><td>Search by:</td><td><div button-toggle my-btn-arr=0></div><select ng-model="selection2" ng-options="option.text for option in options"></select><input type="text" size="20" ng-model="queryF2"><ng-md-icon icon="add_circle_outline" style="fill:#a9a9a9" ng-click="addSearchField();"></ng-md-icon> <ng-md-icon icon="remove_circle_outline" style="fill:#a9a9a9" ng-click="removeSearchField();"></ng-md-icon></td></tr> 

जब मैं इस चलाने

यहाँ निर्देश है बड़े आंशिक में एचटीएमएल (जिसे टेम्पलेट से संबंधित नियंत्रक द्वारा नियंत्रित किया जाता है) मुझे यह त्रुटि मिलती है:

Error: [$compile:nonassign] Expression '0' used with directive 'buttonToggle' is non-assignable! 

तो बस उस टेम्पलेट फ़ंक्शन को दायरे में लपेटें। $ सही लागू करें? नहीं। जब मैं उस ...

link: function(scope) { 
      scope.myBtnTxt = ["AND", "OR", "NOT"]; 
      scope.click = function() { 
       scope.$apply (function() { 
        scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0); 
       }) 
      } 
     } 

मैं इस त्रुटि मिलती है:

Error: [$rootScope:inprog] $apply already in progress 

तो यह स्पष्ट रूप से गलत तरीके से गुंजाइश लपेटकर के साथ एक समस्या है, लेकिन यकीन है कि यह कैसे तय करने के लिए नहीं। कोई विचार?

Answer 1

ऐसा लगता है कि आप एक दो रास्ता my-btn-arr के लिए बाध्यकारी बनाने के लिए नहीं करना चाहते हैं की तरह । यदि आप मौजूदा चर से जुड़ने के बजाय निर्देश को डेटा पास करना चाहते हैं, तो link की विशेषता तर्क से पढ़ें।

.directive('buttonToggle', function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     template: '<button ng-click="click()">{{ myBtnTxt[myBtnArr] }</button>', 
     link: function(scope, elem, attr) { 
     scope.myBtnArr = attr.myBtnArr; 
     scope.myBtnTxt = ["AND", "OR", "NOT"]; 
     scope.click = function() { 
      scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0); 
     } 
     } 
    } 
    }); 

आप भी संभावना है इनपुट उपयोग $parse के रूप में एक चर पास करना चाहते हैं।

// This won't work with an isolated scope, inherit from parent scope instead 
scope : true, 
link: function(scope, elem, attr) { 
    // this will evaluate the expression against the scope 
    scope.myBtnArr = $parse(attr.myBtnArr)(scope); 
} 

अब आप क्या तुम सच में एक दो तरह से बाध्यकारी उपयोग करना चाहते हैं के रूप में

<div button-toggle my-btn-arr="0"></div> 
<div button-toggle my-btn-arr="view.myValue"></div> 

निर्देश उपयोग कर सकते हैं, यह मान पथ अभिव्यक्ति my-btn-arr के साथ परिभाषित में वापस लिखने के लिए संभव होना चाहिए।तो, अगर आप का उपयोग scope: { myBtnArr: "=" } आप इस तरह एक लिखने योग्य अभिव्यक्ति के साथ निर्देश उपयोग करने के लिए है:

<div button-toggle my-btn-arr="view.myValue"></div> 
<!-- "0" is not assignable--> 
<div button-toggle my-btn-arr="0"></div> 

उदाहरण: http://jsfiddle.net/Lw7ckt9x/1/

Answer 2

लिंक फ़ंक्शन का उपयोग करने के बजाय, नियंत्रक फ़ंक्शन के तहत एक ही चीज़ करने का प्रयास करें। लिंक फ़ंक्शन की आवश्यकता होती है जब आप कार्यक्षमता के लिए किसी भी DOM मैनिपुलेशन कर रहे होते हैं जिसके लिए आपको नियंत्रक की आवश्यकता होती है।

Answer 3

ngdocs पर इस त्रुटि को देखें।

<div button-toggle my-btn-arr=0></div> 

लेकिन 0 आबंटित नहीं है:

आप इस का उपयोग करें। जिसका अर्थ है आप 0 = 1;

आप सादे 0 इस तरह के बजाय 0 के मूल्य के साथ एक चर पारित करने के लिए है नहीं कर सकते:

<div button-toggle my-btn-arr="obj.myvar"></div>