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

24 浏览
0 Comments

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

我有一个非常简化的版本，可以解决问题。\n我有一个简单的指令。每当你点击一个元素，它就会添加另一个元素。然而，为了正确渲染，它需要先编译。\n我的研究引导我找到了$compile。但是所有的示例都使用了一个我不知道如何在这里应用的复杂结构。\n这里有一些示例：http://jsfiddle.net/paulocoelho/fBjbP/1/\nJS代码如下：\nvar module = angular.module(\'testApp\', [])\n .directive(\'test\', function () {\n return {\n restrict: \'E\',\n template: \'{{text}}\',\n scope: {\n text: \'@text\'\n },\n link:function(scope,element){\n $( element ).click(function(){\n // TODO: This does not do what it\'s supposed to :(\n $(this).parent().append(\"\");\n });\n }\n };\n});\nJosh David Miller的解决方案：http://jsfiddle.net/paulocoelho/fBjbP/2/

0

3 答案

0 Comments

在AngularJS中动态添加指令有两种方式：

1. 将一个AngularJS指令插入到另一个指令中

- 插入一个新的元素（指令）

- 插入一个新的属性（指令）到元素中

2. 在模板之外执行此操作的原因是什么？

首先，我们来看一下如何将一个指令插入到另一个指令中：

插入一个新的元素（指令）很简单，可以在"link"或"compile"中使用。代码如下：

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)

现在，它可以正常工作了。

在模板之外执行此操作的原因是什么？

0
0 Comments

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

在AngularJS中，可以通过编译和链接来动态地添加指令。下面是两种添加指令的方法。

第一种方法是在现有的元素上添加一个属性指令。假设你想在元素上动态添加指令，可以使用以下代码：

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

第二种方法是添加一个新的元素指令。可以使用以下代码：

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

在使用这些方法时要注意，为了避免出现"Maximum call stack size exceeded"错误，需要移除原始的指令。

希望这能帮到你。

0
0 Comments

在AngularJS中动态添加指令的问题是由于需要在页面上动态添加DOM元素，而且每个DOM元素需要附加一个特定的指令。通过使用$compile服务可以解决这个问题。下面的代码片段展示了如何使用$compile服务动态添加指令：

.directive('test', function($compile) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '
{{text}}
',
    controller: function($scope, $element) {
      $scope.add = function() {
        var el = $compile("")($scope);
        $element.parent().append(el);
      };
    }
  };
});

这段代码首先定义了一个名为'test'的指令，指令类型为元素（E）。指令包含了一个作用域（scope），其中有一个属性text用于传递值。指令还定义了一个模板（template），其中包含一个点击事件，当点击时会调用add方法。add方法中使用$compile服务将新的指令编译并附加到父元素上。

需要注意的是，$compile服务通常在这种简单的情况下并不需要使用，因为通常有更简单的方法可以实现动态添加指令的功能。在大多数情况下，可以使用ngRepeat等其他指令来完成相同的任务。但是在某些特殊情况下，像这样动态添加指令时，$compile服务是唯一的解决方案。

总结起来，使用$compile服务可以在AngularJS中动态添加指令，通过编译和附加新的DOM元素来实现。这种方式虽然相对复杂，但在某些特定的场景下是必要的。

0