कोणीय निर्देश/बाल निर्देश एनजी-दोहराने के अंदर स्थानांतरित करें

Question

समस्या यह है कि बाल निर्देश माता-पिता से बंधे हैं हालांकि वाक्यविन्यास {{name}}ng-repeat द्वारा अनदेखा हो जाता है। इसे प्राप्त करने का सही तरीका क्या होगा?

एचटीएमएल (मुख्य/बच्चे के निर्देश)

<compact-select 
    no-item-selected-text="Add a Customer" 
    no-item-selected-icon="fa-user" 
    search-placeholder="Type a customer name" 
    cs-model="customer" 
    cs-items="contacts" 
> 
    <display-item-template> 
     <span>{{name}}</span> 
     or 
     <span>{{item.name}}</span> 
    </display-item-template> 
</compact-select> 

निर्देशक

angular.module('core').directive('compactSelect', [function($timeout) { 
    return { 
     templateUrl : 'modules/core/views/components/compact-select-tpl.html', 
     bindToController: true, 
     transclude: true, 
     scope: { 
      noItemSelectedText: '@', 
      noItemSelectedIcon: '@', 
      csModel: '=', 
      csItems: '=csItems' 
     }, 
     controllerAs : 'ctrl', 
     controller : function($scope) { 

     } 
    }; 
}]).directive('displayItemTemplate', function($timeout) { 
    return { 
     require: '^compactSelect', 
     restrict: 'E' 
    } 
}); 

निर्देशक टेम्पलेट (मॉड्यूल/कोर/विचारों/घटकों/कॉम्पैक्ट-चयन-tpl.html)

<div class="compact-select-repeater-box" style="" > 
    <div ng-transclude ng-repeat="item in ctrl.csItems | filter:searchParam" class="compact-select-repeater" ng-class="ctrl.getHighlightedClass(item)" ng-click="ctrl.itemSelected(item)"> 
     <span>{{item.name}}</span> 
     <span>{{item.id}}</span> 
    </div> 
    <div style="position:absolute;bottom:0"> 
     <a href="#">+ Click here to add customer {{ctrl.message}}</a> 
    </div> 
</div> 

मैं देख सकता हूँ कि

<span>{{item.name}}</span> 
<span>{{item.id}}</span> 

साथ

<span>{{name}}</span> 
or 
<span>{{item.name}}</span> 

प्रश्न

<span></span> 
or 
<span>{{item.name}}</span> 

और नहीं के साथ बदल जाता है: बाल निर्देश से एचटीएमएल बाइंडिंग वाक्यविन्यास का सम्मान करने के लिए मुझे ng-repeat कैसे मिल सकता है? या यह हासिल करने का एक और तरीका है?

Answer 1

यदि मैं गलत नहीं हूं, तो आप list view बनाने की कोशिश कर रहे हैं जैसे कि सूची के template उपयोगकर्ता द्वारा प्रदान किया जाएगा, लेकिन विधियों (क्लिक, आदि) निर्देश के माध्यम से पहले से ही उपलब्ध कराया जाएगा।

अब, angular 1.3 के बाद से, transcluded scopedirective isolated scope का एक बच्चा,

तो आपके मामले में अगर आप सही पदानुक्रम का पालन करें, आप उपयोगकर्ता द्वारा प्रदान की टेम्प्लेट से directive scope का उपयोग कर सकते है,। >ng-repeat new scope for every row - ->transcluded scope

Directive isolated scope:

यहाँ अपने दायरे पदानुक्रम है।

हां, तो आप transcluded scope से directive scope का उपयोग करना चाहते हैं, आप (एनजी-दोहराने के लिए) $parent क्या करने की जरूरत है और फिर item.name का उपयोग, नीचे की तरह:

<display-item-template>    
     <span>Item Name: {{$parent.item.name}}</span>    
</display-item-template> 

इसके अलावा, आप ऐसा नहीं करते अपने compact-select-tpl अंदर बाइंडिंग की जरूरत है, क्योंकि आप उस सामग्री ट्रांसक्लुजन से आते हैं:

<div class="compact-select-repeater-box" style="" > 

    <div ng-transclude ng-repeat="item in ctrl.csItems | filter:searchParam" 
    class="compact-select-repeater" 
    ng-class="ctrl.getHighlightedClass(item)" 
    ng-click="ctrl.itemSelected(item)"> 
     <!-- <span>{{item.name}}</span> 
     <span>{{item.id}}</span> --> 
    </div> 

    <div style="position:absolute;bottom:0"> 
     <a href="#">+ Click here to add customer {{ctrl.message}}</a> 
    </div> 
</div> 

Answer 2

displayItemTemplate निर्देश जो आप अन्य निर्देश के अंदर स्थानांतरित करते हैं, पहले ही यह डेटा {{name}} और {{item.name}} इंटरप्रोलेट किया गया है।

यदि आपके पास $ स्कोप में इन चर नहीं हैं, तो यह आपके स्पैन के अंदर खाली तारों को स्थानांतरित कर देगा।

फिर आपके compactSelect निर्देश में, जो div को स्थानांतरित किया जाता है, उसकी सामग्री ओवरराइड हो जाएगी।

यदि आप displayItemTemplate निर्देश को अन्य निर्देश के टेम्पलेट के अंदर ले जाते हैं, तो दोहराना काम करेगा। (आप निकालना एनजी (transclude और transclude की आवश्यकता होगी:। सच

Fiddle

ही, यदि आप bindToController का उपयोग करें, नहीं विशेषताओं गुंजाइश अंदर रख सकता हूं

function compactSelect() { 
 
    return { 
 
    template : [ 
 
     '<div class="compact-select-repeater-box" style="" >', 
 
     '<div ng-repeat="item in ctrl.csItems | filter:searchParam" class="compact-select-repeater" ng-class="ctrl.getHighlightedClass(item)" ng-click="ctrl.itemSelected(item)">', 
 
     '<display-item-template>', 
 
      '<span>{{item.name}}</span>', 
 
     '</display-item-template>', 
 
     '</div>', 
 
     '<div style="position:absolute;bottom:0">', 
 
      '<a href="#">+ Click here to add customer {{ctrl.message}}</a></div></div>', 
 
    ].join(''), 
 
    bindToController: { 
 
     noItemSelectedText: '@', 
 
     noItemSelectedIcon: '@', 
 
     csItems: '=csItems' 
 
    }, 
 
    scope: {}, 
 
    controllerAs : 'ctrl', 
 
    controller : function($scope) { 
 

 
    } 
 
    } 
 
} 
 
function displayItemTemplate() { 
 
    return { 
 
     require: '^compactSelect', 
 
     restrict: 'E' 
 
    } 
 
} 
 
function SuperController() { 
 
\t this.name = "a name"; 
 
\t this.contacts = [{name:"rob"}, {name:"jules"}, {name:"blair"}]; 
 
} 
 
angular.module('myApp', []); 
 
angular 
 
    .module('myApp') 
 
    .controller('SuperController', SuperController) 
 
    .directive('compactSelect', compactSelect) 
 
    .directive('displayItemTemplate', displayItemTemplate);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="SuperController as s"> 
 
    <compact-select 
 
     no-item-selected-text="Add a Customer" 
 
     no-item-selected-icon="fa-user" 
 
     search-placeholder="Type a customer name" 
 
     cs-items="s.contacts"> 
 
    </compact-select> 
 
    </div> 
 
</div>