Список директив внутри от нг-повтора

Я работаю на странице, которая состоит из 5 директив, например:Список директив внутри от нг-повтора

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

Я хотел бы иметь возможность изменить порядок их по требованию так что пользователь может контролировать, как выглядит их страница. Единственный способ, которым я мог думать, что делать укладывал их в нг-повторе:

$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, но это не так.

источник

2015-10-15 m0ngr31

это было бы полезно для вас. , http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html – MaheshKumar

Возможный дубликат [Rendering директивы в $ sce.trustAsHtml] (http://stackoverflow.com/questions/20623118/rendering-directives-within-sce-trustashtml) –

Вы можете создать директиву, которая вводит html с шаблоном на основе ввода от пользователя и использует $ 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); 
    }; 
});

источник

2015-10-15 22:14:38 cameronroe

Надеюсь, вы легко сможете это сделать.

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>

источник

2016-01-12 12:16:50

Список директив внутри от нг-повтора

ответ

Смежные вопросы