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

How to pass directive name to template - Angular.js

本文关键字：js 角度 指令      更新时间：2023-09-26

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

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

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

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

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

你可以在编译函数中做这些更改： 

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

我根据 Angular 动态模板博客文章中的提示制作了一个 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);
      }
   };
});
相关文章：