माता-पिता निर्देश

Question

के भीतर बाल निर्देश संलग्न करें मेरे पास एक मूल निर्देश है जहां मैं लिंक फ़ंक्शन में गतिशील रूप से बाल निर्देश जोड़ना चाहता हूं। बच्चे के निर्देश^^ माता-पिता की आवश्यकता है डायरेक्टिव। मैं किसी भी HTML तत्व को जोड़ने में सक्षम हूं लेकिन जैसे ही मैं अपने बच्चे के निर्देश को संकलित करने की कोशिश करता हूं, मुझे निम्न त्रुटि मिलती है कि यह आवश्यक नियंत्रक नहीं ढूंढ सकता है। यदि मैं मैन्युअल रूप से बाल निर्देश जोड़ता हूं तो यह पूरी तरह से काम करता है।

त्रुटि:

Error: [$compile:ctreq] Controller 'myInput', required by directive 'myKey', can't be found! 

मेरे टेम्पलेट तत्वों को जोड़ने के बाद इस तरह दिखना चाहिए:

<myInput> 
<myKey></myKey> <-- added dynamically 
<myKey></myKey> <-- added dynamically 
<myKey></myKey> <-- added dynamically 
    .... 
</myInput> 

myInput निर्देश:

angular.module('myModule').directive('myInput', ['$log', '$templateCache', '$compile', function($log, $templateCache, $compile) { 
    return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     service: '=',   // expects a stimulus object provided by the tatoolStimulusService 
     onkeydown: '&'   // method called on key press 
    }, 
    controller: ['$scope', function($scope) { 
     this.addKey = function(keyCode, value) { 
     $scope.service.addInputKey(keyCode, { givenResponse: value }); 
     }; 
    }], 
    link: function (scope, element, attr) { 

     // add keys directives 
     angular.forEach(scope.service.registeredKeyInputs, function(value, key) { 
     var keyEl = angular.element(
      $compile('<myKey code="'+ key +'" response="'+ value.response +'"></myKey >')($rootScope)); 
     element.children(":first").append(keyEl); 
     }); 

    }, 
    template: '<div ng-transclude></div>' 
    }; 
}]); 

MyKey निर्देश:

angular.module('myModule').directive('myKey', ['$log', '$sce', function($log, $sce) { 
    return { 
    restrict: 'E', 
    scope: {}, 
    require: '^myInput', 
    link: function (scope, element, attr, myCtrl) { 
     myCtrl.addKey(attr.code, attr.response); 

     // ... 
    }, 
    template: '<div class="key"><span ng-bind-html="key"></span></div>' 
    }; 
}]); 

Answer 1

बदलें संकलन संलग्न आपरेशन के आदेश संलग्न-संकलन करने के लिए:

var keyEl = angular.element('<myKey code="'+ key +'" response="'+ value.response +'"></myKey>'); 
element.append(keyEl); 
$compile(keyEl)(scope); 

जाहिर है यह इस मामले (लगाने पेरेंट तत्व निर्देश) में महत्वपूर्ण है कि नए तत्व संकलित किया जा रहा पहले से ही डोम में था।

जब तक डोम तत्व को डोम में शामिल नहीं किया जाता है, तब उसके माता-पिता नहीं होते हैं (इसकी parentNode संपत्ति null है)। जब कोणीय ^myInput की तलाश करता है तो यह डीओएम पेड़ को तब तक चलाता है जब तक यह आवश्यक निर्देश के साथ नोड पाता है। यदि तत्व अभी तक डोम में नहीं है, तो यह खोज तुरंत विफल हो जाती है, क्योंकि तत्व में parentNode नहीं है। इसलिए आपको जो त्रुटि मिल रही है।

इसके अलावा, मैं CamelCase से सर्प मामले के लिए अपने निर्देशों के नाम बदलने के लिए सलाह देते हैं:

<my-input> 
    <my-key></my-key> 
</my-input> 

फिर संकलन हिस्सा भी बदल जाएगा:

angular.element('<my-key code="'+ key +'" response="'+ value.response +'"></my-key >');