1

我有一个指令可以创建一堆类似的小部件。每个小部件都有不同的指令。这是我用来创建小部件的模板：

template: '<li><div {{widgetModel.directiveName}}></div></li>'

我想要协调变量和/或模板来声明需要使用的指令。模板将是：

template: '<li><div directive-name></div></li>'

然后我希望它充当一个普通指令，其属性名称为directiveName. 当前代码没有发生这种情况，我不知道如何使其表现得像我需要的那样。directiveName 指令实际上可以是任何东西。

4

2 回答 2

1

您可以在 compile 函数中进行这些更改：

angular.module('myWidgets', [])
  .directive('multiDirective', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs)
        {
            var htmlText = '<ul>' +
                    '<li ' + attrs.directiveName + '>' + '</li>' +
                '</ul>';
            element.replaceWith(htmlText);
        }
    }
})

然后你可以这样称呼它：

<multi-directive directive-name='widget1' />
于 2013-11-05T04:45:56.917 回答
0

我根据我在另一篇文章中看到的Angular Dynamic Templates博客文章中的提示制作了一个 CodePen 示例。

为了获得如下所示的 HTML：

<div ng-controller="ExampleCtrl">
  <div ng-repeat="dir in dirs">
    <div smart />
  </div>
</div>

并假设您的控制器看起来像这样：

function ExampleCtrl($scope) {
   $scope.dirs = ["<div dir-a />","<div dir-b />"];
}

该smart指令可能如下所示：

.directive('smart', function($compile) {
   return {
      restrict: 'AE',
      link: function (scope, element) {
         element.html(scope.dir);
         $compile(element.contents())(scope);
      }
   };
});
于 2013-11-05T05:05:06.087 回答