如何在AngularJS中动态添加指令？

Question

我有一个非常简化的版本,我正在做的事情可以解决问题.

我有一个简单的directive.每当您单击一个元素时,它会添加另一个元素.但是,需要首先编译它才能正确呈现它.

我的研究引导我$compile.但是所有的例子都使用了一个复杂的结构,我真的不知道如何在这里应用.

小提琴在这里: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/

Answer 1

你有很多毫无意义的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 );
      };
    }
  };
});

你会注意到我也重构了你的指令,以便遵循一些最佳实践.如果您对这些问题有任何疑问,请与我们联系.

Answer 2

除了完美的Riceball LEE添加新元素指令的例子

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

可以使用以下方式将新的attribute-directive添加到现有元素:

比方说,您要添加上即时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

希望有所帮助.

Answer 3

在angularjs上动态添加指令有两种样式:

将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 );

所以,我必须找到一种方法来调用指令"link"函数.很难获得隐藏在闭包内的有用方法.

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)       

现在,它运作良好.

Answer 4

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

Answer 5

Josh David Miller是对的.

PCoelho,如果你想知道$compile幕后是什么以及如何从指令生成HTML输出,请看下面

该$compile服务编译"< test text='n' >< / test >"包含指令("test"作为元素)的HTML()片段并生成一个函数.然后可以使用范围执行此函数以获取"指令的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

Answer 6

如果您尝试动态添加使用内联的指令,则Josh David Miller接受的答案非常有用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);
            }
        }
    }
}]);