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>

这将为我提供正确的标签，但它们不会被角度处理为指令。有办法吗？我假设它与$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);
    };
});

Answer 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>

ng-repeat内的指令列表

2 个答案: