我可以在其他指令中使用任意 AngularJS 指令吗？

Question

我想使用指令显示来自我的控制器的对象列表。在该指令中，我希望能够使用几个可能的指令之一，但我并不总是知道是哪一个。如果我在控制器的范围内设置该指令名称，我如何在主指令的模板中使用它？

这是plnkr，下面是什么。

HTML：

<div ng-app="music" ng-controller="rock">
  <h1>Favorite Bands</h1>
  <prog></prog>
</div>

JS：

angular.module('music', []);

angular.module('music').controller('rock', ['$scope', function($scope){
  $scope.directiveName = 'dinosaurs';
  $scope.bands = [
    { name:'Rush'}, { name:'King Crimson' }, { name: 'Porcupine Tree'}, { name: 'Marillion'}];
}]);

angular.module('music').directive('prog', function(){
  return {
    restrict: 'E',
    replace: true,
    template: '<ul><li ng-repeat="band in bands"><{{directiveName}}>{{band.name}}</{{directiveName}}></li></ul>'
  };
});

angular.module('music').directive('dinosaurs', function(){
  return {
    restrict: 'E',
    transclude: true,
    template: '<ng-transclude></ngtransclude> - DINOSAUR!'
  };
});

在这种情况下，我将$scope.directiveName 设置为dinosaurs，这是我想在主指令中使用的指令的名称，称为prog。

在prog 的模板中，我尝试使用插值将指令的名称插入括号中。然而，输出如下：

• 拉什
• 深红之王
• 豪猪树
• Marillion

我也尝试在 span: 上使用类名，并将“恐龙”作为一个类插入到 span 中，但 Angular 不会将其作为指令处理。

我不确定我是否需要隔离范围，但从我所读到的内容来看，我认为这无关紧要。我也是嵌入的新手，但我认为dinosaurs 指令应该获取每个列表项的内容并添加“ - DINOSAURS！”到最后。

将一个指令的名称传递给另一个指令的最佳实践方法是什么？

Answer 1

为了避免混乱的$compiles，我会做的是使用ng-include 作为开关，比如this：

angular.module('music').directive('prog', function(){
  return {
    restrict: 'E',
    replace: true,
    template: '<ul><li ng-repeat="band in bands"><div ng-include="directiveName + \'.html\'"></div></li></ul>'
  };
});

Answer 2

一种可能的解决方案是将“我如何渲染这个项目”的责任从控制器/指令转移到项目本身。

最简单的方法是给项目一个 templateUrl 属性。然后，您可以引入一个简单的包装器指令来绑定项目：

myModule.directive('bandView', function() {
  return {
    scope: {band: '=bandView'}
    templateUrl: '<div ng-include="band.templateUrl"></div>'
  };
});

然后，如果你有一些波段列表，你可以渲染它们：

<h1>My band list</h1>
<div ng-repeat="b in bands" band-view="b"></div>

然后，对于您想要执行的每种渲染类型，您将拥有不同的 html 模板。

这个想法正在运行：http://jsbin.com/EhAnIMaJ/2/edit?html,js,output

Answer 3

更新 - 指令中有几个选项可以更改模板：

最简单的第一个想法是template:function(el, attr)，它允许您返回一个函数，使您能够根据non-interpolated 属性更改模板。所以它可能无法满足您的需求。

template:function() plunker,

另一种方法是 $compile 模板并在链接函数中替换 you 元素。

$compile plunker

---

这与多模板无关 -

您可以在链接函数中到达父指令的控制器并在其中维护范围。 这是尝试将其简化为基本要素：

app.directive("parentDirective", function() {
  return {
    restrict: 'EA',
    controller: function($scope) {
        this.callFunc = function(){
           ...
        }
    }
  }
});

app.directive("childDirective", function($compile, $log) {

  return {
    require: '?^parentDirective',
    scope: {
       model: '=ngModel'
    },
    link : function(scope, el, attr, ctrl) {
        ctrl.callFunc();
    }
...

和类似的plunker 或plunker