कोणीय रूप से AngularJS में निर्देश जोड़ें


Answers

एक नया तत्व-निर्देश जोड़ने के लिए सही राइसबॉल LEE के उदाहरण के अलावा

newElement = $compile("<div my-directive='n'></div>")($scope)
$element.parent().append(newElement)

मौजूदा तत्व में एक नया विशेषता-निर्देश जोड़ना इस तरह से किया जा सकता है:

आइए मान लें कि आप span तत्व पर my-directive को ऑन-द-फ्लाई जोड़ना चाहते हैं।

template: '<div>Hello <span>World</span></div>'

link: ($scope, $element, $attrs) ->

  span = $element.find('span').clone()
  span.attr('my-directive', 'my-directive')
  span = $compile(span)($scope)
  $element.find('span').replaceWith span

उम्मीद है की वो मदद करदे।

Question

मेरे पास एक बहुत उबला हुआ संस्करण है जो मैं कर रहा हूं जो समस्या को पूरा करता है।

मेरे पास एक सरल directive । जब भी आप किसी तत्व पर क्लिक करते हैं, तो यह एक और जोड़ता है। हालांकि, इसे सही ढंग से प्रस्तुत करने के लिए इसे पहले संकलित करने की आवश्यकता है।

मेरे शोध ने मुझे $compile करने के लिए प्रेरित किया। लेकिन सभी उदाहरण एक जटिल संरचना का उपयोग करते हैं जो मुझे नहीं पता कि यहां कैसे आवेदन करना है।

फिडल्स यहां हैं: http://jsfiddle.net/paulocoelho/fBjbP/1/

और जेएस यहाँ है:

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '<p>{{text}}</p>',
        scope: {
            text: '@text'
        },
        link:function(scope,element){
            $( element ).click(function(){
                // TODO: This does not do what it's supposed to :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

जोश डेविड मिलर द्वारा समाधान: http://jsfiddle.net/paulocoelho/fBjbP/2/




जोश डेविड मिलर सही है।

पीसीओलोहो, यदि आप सोच रहे हैं कि दृश्यों के पीछे $compile क्या है और निर्देश से HTML आउटपुट कैसे उत्पन्न होता है, तो कृपया नीचे एक नज़र डालें

$compile सेवा HTML ( "< test text='n' >< / test >" ) के खंड को संकलित करती है जिसमें निर्देश ("तत्व" तत्व के रूप में) शामिल होता है और एक फ़ंक्शन उत्पन्न करता है। इस फ़ंक्शन को "निर्देश से HTML आउटपुट" प्राप्त करने के लिए दायरे के साथ निष्पादित किया जा सकता है।

var compileFunction = $compile("< test text='n' > < / test >");
var HtmlOutputFromDirective = compileFunction($scope);

यहां पूर्ण कोड नमूने के साथ अधिक जानकारी: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs




function addAttr(scope, el, attrName, attrValue) {
  el.replaceWith($compile(el.clone().attr(attrName, attrValue))(scope));
}



Links