javascript - ng-repeat 内的指令列表

Question

我正在处理一个由 5 个指令组成的页面，例如:

<directive-one></directive-one>
<directive-two></directive-two>
<directive-three></directive-three>
<directive-four></directive-four>
<directive-five></directive-five>

我希望能够根据需要重新排序，以便用户可以控制其页面的外观。我能想到的唯一方法是将它们放入 ng-repeat 中:

$scope.directiveOrder = [{
    name: "directive-one",
    html: $sce.trustAsHtml('<directive-one></directive-one>'),
    order: 1
}, ...

HTML:

<div ng-repeat="directive in directiveOrder" ng-bind-html="directive.html">
    {{directive.html}}
</div>

这将为我提供正确的标签，但它们不会被 Angular 处理为指令。有办法解决这个问题吗？我假设这与 $sce 没有处理它有关，但我可能偏离了？

Answer 1

尝试创建一个新指令并使用 $compile 呈现每个指令:

https://jsfiddle.net/HB7LU/18670/ http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

HTML

<div ng-controller="MyCtrl">
    <button ng-click="reOrder()">Re-Order</button>
    <div ng-repeat="d in directives">
        <render template="d.name"></render>
    </div>
</div>

JS

var myApp = angular.module('myApp',[])
.directive('directiveOne', function() {
    return {
        restrict: 'E',
        scope: {},
        template: '<h1>{{obj.title}}</h1>',
        controller: function ($scope) {
            $scope.obj = {title: 'Directive One'};
        }
    }
})
.directive('directiveTwo', function() {
    return {
        restrict: 'E',
        scope: {},
        template: '<h1>{{obj.title}}</h1>',
        controller: function ($scope) {
            $scope.obj = {title: 'Directive Two'};
        }
    }
})
.directive("render", function($compile){
    return {
        restrict: 'E',
        scope: {
            template: '='
        },
        link: function(scope, element){
            var template = '<' + scope.template + '></' + scope.template + '>';
            element.append($compile(template)(scope));
        }
    }
})
.controller('MyCtrl', function($scope, $compile) {
    $scope.directives = [{
        name: 'directive-one'
    }, {
        name: 'directive-two'
    }];
    $scope.reOrder = function () {
        $scope.directives.push($scope.directives.shift());
        console.log($scope.directives);
    };
});