AngularJS एनजी-दोहराने

Question

समस्या

redering नहीं के साथ निर्देश मैं गम गेंदों कि एक सेवा से लिया गया है की एक सूची प्रबंधन करने के लिए है। निर्देश मेरे द्वारा बनाए गए काम करने के लिए जब मैं HTML में तत्वों को हार्डकोड लगता है, लेकिन जब मैं गतिशील रूप से एक एनजी-दोहराने का उपयोग कर गम गेंदों आवंटित करने के लिए प्रयास करते हैं।

एचटीएमएल

<div ng-controller="GumballsCtrl"> 

<h1>Working</h1> 
    <ul> 
     <li ng-repeat="gumball in Gumballs"> 
      <div class="gumballColor{{gumball.color}}">{{gumball.color}}</div> 
     </li> 
    </ul> 

<h1>Problem - Expecting the same result at the work version</h1> 

    <ul> 
     <li ng-repeat="gumball in Gumballs"> 
      <mygumball id={{gumball.id}} color="{{gumball.color}}">{{gumball.color}}</mygumball> 
     </li> 
    </ul> 
</div> 

जावास्क्रिप्ट

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

function GumballsCtrl($scope, Gumballs) { 
    $scope.Gumballs = Gumballs; 
} 

myApp.factory('Gumballs', function() { 
    return [{ 
     id: '1', 
     color: 'R' 
    }, { 
     id: '2', 
     color: 'G' 
    }, { 
     id: '3', 
     color: 'B' 
    }, { 
     id: '4', 
     color: 'Y' 
    }, { 
     id: '5', 
     color: 'G' 
    }]; 
}); 

myApp.directive('mygumball', function ($scope) { 
    return { 
     restrict: 'E', 

     scope: {}, 

     link: function (scope, element, attrs) { 
      if (attrs.color !== '' && attrs.color !== undefined) { 
       scope.color = attrs.color; 
      } else { 
       scope.color = 'U'; 
      } 
     }, 

     replace: true, 

     template: "<div class='gumballColor{{color}}'>{{color}}</div>" 
    }; 
}); 

सीएसएस विशेषताओं

.gumballColorR { 
    font-size: 12px; 
    text-align: center; 
    padding: 2px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border: solid 1px #CC0000; 
    background-color: #FF0000; 
    width: 15px; 
    height: 15px; 
    margin-left: 5px; 
    margin-top: 5px; 
} 
.gumballColorG { 
    font-size: 12px; 
    text-align: center; 
    padding: 2px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border: solid 1px #00CC00; 
    background-color: #00FF00; 
    width: 15px; 
    height: 15px; 
    margin-left: 5px; 
    margin-top: 5px; 
} 
.gumballColorB { 
    font-size: 12px; 
    text-align: center; 
    padding: 2px; 
    color: #FFFFFF; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border: solid 1px #0000CC; 
    background-color: #0000FF; 
    width: 15px; 
    height: 15px; 
    margin-left: 5px; 
    margin-top: 5px; 
} 
.gumballColorY { 
    font-size: 12px; 
    text-align: center; 
    padding: 2px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border: solid 1px #CCCC00; 
    background-color: #FFFF00; 
    width: 15px; 
    height: 15px; 
    margin-left: 5px; 
    margin-top: 5px; 
} 
.gumballColorU { 
    font-size: 12px; 
    text-align: center; 
    padding: 2px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border: solid 1px #CCCCCC; 
    background-color: #DDDDDD; 
    width: 15px; 
    height: 15px; 
    margin-left: 5px; 
    margin-top: 5px; 
} 

http://jsfiddle.net/i3sik/NGB9v/22/

आईडी और रंग जब directi में पारित कर दिया एनजी-दोहराने का उपयोग करते हुए पारित होने पर अपरिभाषित होने पर समाप्त होता है, लेकिन HTML में हार्डकोड होने पर काम करता है।

आप कोई मदद है कि आप प्रदान कर सकते हैं के लिए बहुत बहुत धन्यवाद।

Answer 1

समस्या यहाँ अलग गुंजाइश है। scope: {} का उपयोग करके आपने उस तत्व पर कार्य करने के लिए एक नया, अलग-अलग दायरा बनाया है। अलग-अलग स्कोप माता-पिता के दायरे से प्राप्त नहीं होते हैं। अलग-अलग क्षेत्रों के साथ निर्देशों पर सभी विशेषताओं और सामग्री का मूल्यांकन अलग-अलग दायरे के संदर्भ में किया जाता है। gumball अलग-अलग दायरे में मौजूद नहीं है, इसलिए सब कुछ अपरिभाषित के रूप में आता है।

आपको इसे ठीक करने दो विकल्प हैं: (1) अलग गुंजाइश को दूर (जैसे scope: true एक बच्चे गुंजाइश बनाने के लिए); या (2) मूल्यों को अपने अलग-अलग दायरे में बांधें।

गुंजाइश चर करने के लिए अपने गुण के लिए बाध्य करने के लिए, आप बस गुंजाइश और आप बंधन की तरह निर्दिष्ट करने की आवश्यकता हैं:

scope: { 
    id: '@', 
    color: '@' 
}, 

यह कहा गया है कि गुण id और color के संदर्भ में अंतर्वेशित हो रहे हैं माता-पिता का दायरा और फिर दायरे में जोड़ा गया। आप अपने link फ़ंक्शन के अंदर उस तर्क को हटा सकते हैं - यह आपके लिए यह करेगा।

लेकिन यह अभी भी सामग्री निर्देश के अंदर की समस्या को छोड़ देता है।

transclude: true, 
template: "<div class='gumballColor{{color}}' ng-transclude></div>" 

ट्रांसक्लुजन तत्व की सामग्री ले जाता है और माता-पिता गुंजाइश है, उदा का एक नया बच्चा के सापेक्ष interpolates: अंतर्वेशन करने के लिए है कि माता-पिता गुंजाइश के संदर्भ में, आप ट्रांसक्लुजन की जरूरत जहां gumball अभी भी परिभाषित किया जाएगा।

इन दो परिवर्तनों के साथ, आपका निर्देश वांछित के रूप में काम करेगा। When writing a directive, how do I decide if a need no new scope, a new child scope, or a new isolate scope?

---

साइड नोट: यहां तक ​​कि अलग गुंजाइश के बिना, अपने link समारोह में तर्क निर्धारित करने के लिए

आप उलझन के बारे में जो गुंजाइश उपयोग करने के लिए हैं, तो यहां एक और तो सवाल यह है कि मदद कर सकता है है विशेषता मान काम नहीं करेंगे। निष्पादन का आदेश यहां महत्वपूर्ण हिस्सा है, जो मोटे तौर पर है: कंपाइलर -> नियंत्रक -> लिंक -> इंटरपोलेशन। इंटरपोलेशन पूरा होने तक, आपके गुणों के लिए कोई मूल्य नहीं है। तो आपके चेक काम नहीं करेंगे।

कहा कि, आप अंतर्वेशित विशेषताओं पर एक $observe सेट कर सकते हैं; $observe हमेशा पहली बार सक्रिय कर देगा, भले ही पारित कर दिया कोई मूल्य नहीं था। आप इस का उपयोग अपने डिफ़ॉल्ट सेट करने के लिए कर सकते हैं। $observe भी बहुत ही कुशल है।

attrs.$observe('attr1', function(val) { 
    if (!angular.isDefined(val)) { 
    scope.attr1 = 'defaultValue'; 
    } 
});