AngularJS - 使用 ng-repeat 的动态指令答案

【问题标题】：AngularJS - Dynamic Directives using ng-repeatAngularJS - 使用 ng-repeat 的动态指令
【发布时间】：2016-01-07 18:57:41
【问题描述】：

我花了一段时间试图找到一个优雅的解决方案，虽然我有一个“有效”的解决方案，但感觉并不是最简单或正确的做事方式。

所以，我的问题是……如何动态加载指令！在某些情况下，以下是我希望我能够摆脱它的方式！除了加载模板之外，我没有包含路由或其他任何内容，并且我为下面的控制器分配了 ng-controller。

app.js

angular.module('myApp', [])

.controller('someController', ['$scope', function($scope) {
  $scope.directives = ['myDirectiveA', 'myDirectiveB'];
}])

.directive('myDirectiveA', function() {
  return {
    template: '<p>Directive A, exciting.</p>'
  };
})

.directive('myDirectiveB', function() {
  return {
    template: '<p>Directive B, equally as exciting.</p>'
  };
});

template.html

<div ng-controller="someController">
  <div ng-repeat="directive in directives">

    <x-directive></x-directive> // Attempt 1
    <x-{{directive}}></x-{{directive}}> // Attempt 2
    <{{'x-' + directive}}></{{'x-' + directive}}> // Attempt 3

  </div>
</div>

任何人都可以提供的任何建议将不胜感激，如果我做了任何明显愚蠢的事情，请原谅这是我第一次使用 Angular！

【问题讨论】：

你需要再写一个辅助指令。
@dfsq 别让我挂了 :) 哈哈有什么线索或文档我可以阅读以了解这一点吗？
我猜你的意思是类似于这个答案 - stackoverflow.com/questions/28414568/…
可以是这样的，是的。

标签： javascript angularjs

【解决方案1】：

希望对你有帮助：

解释：当你想使用时，你必须 $compile 你的指令它在其他指令中，如 ngRepeat 或其他自定义指令...

        angular.module('myApp', [])

        .controller('someController', ['$scope', function ($scope) {
            $scope.directives = ['my-directive-a', 'my-directive-b'];
        }])

        .directive('directive', function ($compile) {
            return {
                restrict: "A",
                scope: {
                    set: "="
                },
                link: function (scope, element) {
                    element.html("<div class=\" "+ scope.set +" \"></div>");
                    $compile(element.contents())(scope);
                }
            };
        })

        .directive('myDirectiveA', function () {
            return {
                restrict: "C",
                template: '<p>Directive A, exciting.</p>'
            };
        })

        .directive('myDirectiveB', function () {
            return {
                restrict: "C",
                template: '<p>Directive B, equally as exciting.</p>'
            };
        });

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
</head>
<body ng-controller="someController">
    
    <div ng-repeat="directive in directives">
        <div directive set="directive"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>

【讨论】：

嗨@Maher，感谢您的解释，我设法让这个工作。我最终将范围更改为 {set: '@'} 否则设置未定义，我更改了输出，但除此之外，它工作得很好。非常感谢您的帮助。
@Andy 不客气，请为其他人选择正确答案。
哦，将 set="directive" 更改为 set="{{directive}}"。如果您可以为其他人更新您的示例，那么我会接受它作为答案。再次感谢:)
@Andy 此更改是为其他应用程序自定义的，例如在某些数组中，我们可能必须发送一个类似 [{directiveName: "yourDirective"}] 的对象，在这种情况下我们的 {set: "= " [as object]} 并且在其他情况下，例如您所拥有的我们传递字符串，因此更改为 {set: "@"} ... 但是您的问题对我很有用。 :)
啊，这很有意义 :) 我已将其标记为答案，因为它成功地将我从一个不那么优雅的洞中挖了出来。再次感谢您的帮助和时间！