AngularJS - Динамические директивы, использующие ng-repeat

Я потратил некоторое время, пытаясь найти изящное решение для этого, в то время как у меня есть решение, которое «работает», это не похоже на самый простой или правильный способ делать что-то.AngularJS - Динамические директивы, использующие ng-repeat

Итак, мой вопрос ... как я могу динамически загружать директивы! В некотором контексте ниже показано, как я надеялся, что смогу с этим справиться! Я не включил маршрутизацию или что-то, кроме шаблона, и я назначил контроллер ниже с ng-контроллером.

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!

источник

2016-01-07 Andy

Вам нужно написать еще одну вспомогательную директиву. – dfsq

@dfsq не оставляйте меня висящим :) haha какие-нибудь подсказки или документация, которые я могу прочитать, чтобы понять это? – Andy

Я думаю, вы имеете в виду что-то вроде этого ответа - http://stackoverflow.com/questions/28414568/angularjs-templateurl-fails-to-bind-attributes-inside-ng-repeat – Andy

я надеюсь, что это поможет вам:

для объяснения: вы должны $ скомпилировать директиву, когда вы хотите использовать его в другой директиве как 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>

источник

2016-01-07 19:51:45 Maher

Привет @Maher, спасибо за объяснение, мне удалось заставить это работать. Я закончил тем, что менял область действия на {set: '@'}, в противном случае установка была неопределенной, и я изменил вывод, но кроме этого, он отлично работал. Большое спасибо за вашу помощь. – Andy

@ Энди, пожалуйста, выберите правильный ответ для других. – Maher

Ох и изменил set = "директива" на set = "{{директива}}". Если бы вы могли просто обновить свой пример для других людей, я приму это в качестве ответа. Еще раз спасибо :) – Andy

AngularJS - Динамические директивы, использующие ng-repeat

ответ

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