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


212

我正在做的事情非常精简,可以解决问题。

我有一个简单的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/

Answers:


259

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

您会注意到,我也重构了您的指令,以便遵循一些最佳实践。如果您有任何疑问,请告诉我。


34
太棒了 有用。看到,这些简单而基本的示例是应在angulars的文档中显示的示例。他们从复杂的例子开始。
PCoelho

1
谢谢,乔什,这真的很有用。我在Plnkr中制作了一个工具,我们正在新的CoderDojo中使用该工具来帮助孩子们学习编码,并且我对其进行了扩展,以便现在可以使用Angular Bootstrap指令,例如datepicker,alert,tabs等。现在它只能在Chrome中运行:embed.plnkr.co/WI16H7Rsa5adejXSmyNj/preview
JoshGough 2013年

3
乔什-有什么不使用即可更轻松地完成此操作的方法$compile?谢谢您的回答!
doubleswirve 2014年

3
@doubleswirve在这种情况下,仅使用ngRepeat会容易得多。:-)但是我假设您的意思是在页面上动态添加新指令,在这种情况下,答案是否定的-没有更简单的方法,因为$compile服务是连接指令并将其连接到事件周期的工具。还有周围没有办法$compile荷兰国际集团在这样的情况下,但在大多数情况下,像ngRepeat另一个指令可以完成同样的工作,(所以ngRepeat是做编译我们)。您有特定的用例吗?
乔什·大卫·米勒

2
编译不应该在预链接阶段进行吗?我认为控制器应该只包含非DOM,可单元测试的代码,但是我对链接/控制器概念是陌生的,所以我不确定。另外,一个基本的替代方法是ng-include + Partial + ng-controller,因为它将用作具有继承范围的指令。
MarcusRådell2014年

77

除了完美的Riceball,LEE的示例还添加了新的元素指令

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

添加新的属性指令可以使用以下方式向现有元素:

比方说,你希望在即时添加my-directivespan元素。

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

希望能有所帮助。


3
不要忘记删除原始指令,以防止“最大调用堆栈大小超出”错误。
SRachamim 2014年

嗨,您能否提供关于我新提议的API的想法,以使以编程方式添加指令的过程更简单?github.com/angular/angular.js/issues/6950谢谢!
trusktr 2014年

我希望在2015年我们不会对调用堆栈的大小进行限制。:(
Psycho BRM

3
Maximum call stack size exceeded错误总是由于无限递归而发生。我从未见过增加堆栈大小可以解决此问题的实例。
Gunchars 2015年

类似的问题,我面对,你能不能帮我在这里stackoverflow.com/questions/38821980/...
潘渡DAS

45

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

因此,我必须找到一种方法来调用指令“链接”函数。很难找到隐藏在闭包内部的有用方法。

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)       

现在,它运行良好。


1
如果可能的话,很想看一个在香草JS中向元素插入新属性的演示-我丢失了一些东西……
Patrick

在元素中插入新属性的真实示例在这里(请参阅我的github):github.com/snowyu/angular-reactable/blob/master/src/…–
Riceball LEE

1
老实说没有帮助。这就是我最终解决问题的方式:stackoverflow.com/a/20137542/1455709
Patrick

是的,这种情况是将属性指令插入另一个指令,而不是模板中的插入元素。
Riceball LEE

在模板之外执行此操作的背后原因是什么?
帕特里克

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

5

如果您尝试动态添加使用内联指令,则乔什·大卫·米勒(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);
            }
        }
    }
}]);

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


4

从以前的许多答案中得到的启发,我想到了以下“ 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>

专家提示。如果您不想使用基于类的指令,则可以更改'<div></div>'为自己喜欢的东西。例如,具有固定属性,该属性包含所需指令的名称,而不是class


类似的问题,我面对,你能不能帮我在这里stackoverflow.com/questions/38821980/...
潘渡DAS

我的天啊。花了2天的时间找到了这个$ compile ...谢谢朋友..效果最好... AJS令人震惊....
Srinivasan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.