Question

我有一个指令，它会创建一堆类似的小部件。每个小部件都包含不同的指令。这是我用来创建我的小部件的模板：

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

我希望调和变量和模板以声明需要使用的指令。然后模板将是：

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

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

Answer 1

您可以在编译函数中执行这些更改：

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' />

Answer 2

我根据我在其他帖子中引用的a CodePen example博文中的提示做了Angular Dynamic Templates。

为了使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);
      }
   };
});

如何将指令名称传递给模板 - Angular.js

2 个答案: