ฉันจะเพิ่มคำสั่งแบบไดนามิกใน AngularJS ได้อย่างไร

ฉันมีเวอร์ชันที่ลวกมากของสิ่งที่ฉันทำซึ่งทำให้เกิดปัญหาข้าม

directiveฉันมีความเรียบง่าย เมื่อใดก็ตามที่คุณคลิกองค์ประกอบมันจะเพิ่มองค์ประกอบอื่น อย่างไรก็ตามจะต้องรวบรวมก่อนเพื่อให้สามารถแสดงได้อย่างถูกต้อง

$compileงานวิจัยของฉันทำให้ฉัน แต่ตัวอย่างทั้งหมดใช้โครงสร้างที่ซับซ้อนซึ่งฉันไม่รู้วิธีสมัครที่นี่จริง ๆ

Fiddles อยู่ที่นี่: http://jsfiddle.net/paulocoelho/fBjbP/1/

และ JS อยู่ที่นี่:

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>");
            });
        }
    };
});

โซลูชันโดย Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/

คุณมี jQuery ที่ไม่มีจุดหมายมากมายในนั้น แต่บริการ $ compile เป็นเรื่องง่ายมากในกรณีนี้:

.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">{{text}}</p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

คุณจะสังเกตเห็นว่าฉันปรับโครงสร้างคำสั่งของคุณอีกครั้งเพื่อปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด แจ้งให้เราทราบหากคุณมีคำถามเกี่ยวกับคำถามเหล่านี้

นอกจากนี้ตัวอย่างข้าวไรซ์บอลที่สมบูรณ์แบบของการเพิ่มองค์ประกอบคำสั่งใหม่

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

การเพิ่มattribute-directive ใหม่ให้กับองค์ประกอบที่มีอยู่สามารถทำได้โดยใช้วิธีนี้:

สมมติว่าคุณต้องการที่จะเพิ่มใน-the-fly my-directiveกับspanองค์ประกอบ

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

หวังว่าจะช่วย

การเพิ่มไดเรกทีฟบน angularjs มีสองลักษณะ:

เพิ่มคำสั่งเชิงมุมเป็นอีกคำสั่ง

• การแทรกองค์ประกอบใหม่ (คำสั่ง)
• การแทรกแอตทริบิวต์ใหม่ (คำสั่ง) เพื่อองค์ประกอบ

การแทรกองค์ประกอบใหม่ (คำสั่ง)

มันง่าย และคุณสามารถใช้ใน "ลิงก์" หรือ "รวบรวม"

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

การแทรกคุณสมบัติใหม่ไปยังองค์ประกอบ

มันยากและทำให้ฉันปวดหัวภายในสองวัน

การใช้ "$ compile" จะทำให้เกิดข้อผิดพลาดซ้ำซ้อนที่สำคัญ !! บางทีมันอาจจะไม่สนใจคำสั่งปัจจุบันเมื่อรวบรวมองค์ประกอบใหม่

$element.$set("myDirective", "expression");
var newElement = $compile( $element )( $scope ); // critical recursive error.
var newElement = angular.copy(element);          // the same error too.
$element.replaceWith( newElement );

ดังนั้นฉันต้องหาวิธีที่จะเรียกฟังก์ชั่น "ลิงค์" คำสั่ง มันยากมากที่จะได้รับวิธีการที่เป็นประโยชน์ซึ่งซ่อนอยู่ลึกเข้าไปในการปิด

compile: (tElement, tAttrs, transclude) ->
   links = []
   myDirectiveLink = $injector.get('myDirective'+'Directive')[0] #this is the way
   links.push myDirectiveLink
   myAnotherDirectiveLink = ($scope, $element, attrs) ->
       #....
   links.push myAnotherDirectiveLink
   return (scope, elm, attrs, ctrl) ->
       for link in links
           link(scope, elm, attrs, ctrl)       

ตอนนี้มันทำงานได้ดี

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

templateคำตอบที่ได้รับการยอมรับโดยจอชเดวิดมิลเลอทำงานที่ดีถ้าคุณกำลังพยายามที่จะแบบไดนามิกเพิ่มคำสั่งที่ใช้แบบอินไลน์ อย่างไรก็ตามหากคำสั่งของคุณใช้ประโยชน์จากtemplateUrlคำตอบของเขาจะไม่ทำงาน นี่คือสิ่งที่ทำงานให้ฉัน:

.directive('helperModal', [, "$compile", "$timeout", function ($compile, $timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {}, 
        templateUrl: "app/views/modal.html",
        link: function (scope, element, attrs) {
            scope.modalTitle = attrs.modaltitle;
            scope.modalContentDirective = attrs.modalcontentdirective;
        },
        controller: function ($scope, $element, $attrs) {
            if ($attrs.modalcontentdirective != undefined && $attrs.modalcontentdirective != '') {
                var el = $compile($attrs.modalcontentdirective)($scope);
                $timeout(function () {
                    $scope.$digest();
                    $element.find('.modal-body').append(el);
                }, 0);
            }
        }
    }
}]);

Josh David Miller ถูกต้อง

PCoelho, ในกรณีที่คุณสงสัยว่าเกิดอะไรขึ้น$compileเบื้องหลังและวิธีสร้าง HTML output จากคำสั่งโปรดดูด้านล่าง

$compileบริการรวบรวมชิ้นส่วนของ HTML (คน"< test text='n' >< / test >") ที่มีคำสั่ง ( "ทดสอบ" เป็นองค์ประกอบ) และผลิตฟังก์ชั่น ฟังก์ชั่นนี้สามารถดำเนินการได้ด้วยขอบเขตเพื่อรับ "HTML output จากคำสั่ง"

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

รายละเอียดเพิ่มเติมพร้อมตัวอย่างโค้ดแบบเต็มที่นี่: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs

ได้รับแรงบันดาลใจจากคำตอบก่อนหน้านี้หลายคำตอบฉันได้คำสั่ง "stroman" ต่อไปนี้ซึ่งจะมาแทนที่คำสั่งอื่น ๆ

app.directive('stroman', function($compile) {
  return {
    link: function(scope, el, attrName) {
      var newElem = angular.element('<div></div>');
      // Copying all of the attributes
      for (let prop in attrName.$attr) {
        newElem.attr(prop, attrName[prop]);
      }
      el.replaceWith($compile(newElem)(scope)); // Replacing
    }
  };
});

สำคัญ:restrict: 'C'ลงทะเบียนสั่งที่คุณต้องการที่จะใช้กับ แบบนี้:

app.directive('my-directive', function() {
  return {
    restrict: 'C',
    template: 'Hi there',
  };
});

คุณสามารถใช้สิ่งนี้:

<stroman class="my-directive other-class" randomProperty="8"></stroman>

ในการรับสิ่งนี้:

<div class="my-directive other-class" randomProperty="8">Hi there</div>

protipหากคุณไม่ต้องการใช้คำสั่งตามคลาสคุณสามารถเปลี่ยน'<div></div>'เป็นสิ่งที่คุณต้องการ classเช่นมีแอตทริบิวต์การแก้ไขที่มีชื่อของคำสั่งที่ต้องการแทน