ng-repeat 中的指令列表答案

【问题标题】：List of directives inside of an ng-repeatng-repeat 中的指令列表
【发布时间】：2015-10-15 21:23:49
【问题描述】：

我正在处理一个由 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 没有处理它有关，但我可能会走得很远？

【问题讨论】：

这对你很有用。 . stackoverflow.com/questions/19415394/…
Rendering directives within $sce.trustAsHtml的可能重复
您可以构建一个指令，根据用户的输入使用模板注入 html 并使用 $compile
@FarzadYZ 感谢您提供该链接。这对我有用。
另一种方式 - 不要使用 ngRepeat，而只是使用纯 CSS 来重新排序您的内容，即来自 Flexbox (css-tricks.com/snippets/css/a-guide-to-flexbox) 的 order 属性。

标签： javascript angularjs angularjs-directive angularjs-ng-repeat

【解决方案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>

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);
    };
});

【讨论】：

【解决方案2】：

我希望你能轻松做到。

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'};
        }
    }
});

myApp.controller('ctrl',function($scope){
    $scope.data = [{name:'directive-one'},{name:'directive-two'}];
});

<html ng-app='myApp'>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  </head>
  <body ng-controller='ctrl'>
      <div ng-repeat='item in data'>
      <item.name></item.name>
        <directive-one></directive-one>
    </body>
  </html>

【讨论】：