2

I've spent a while trying to find an elegant solution to this, whilst I have a solution that 'works' it doesn't feel like the easiest or correct way of doing things.

So, my question is...how can I dynamically load directives! For some context, below is how I was hoping I'd be able to get away with it! I've not included the routing or anything but the template loads and I assign the below controller with ng-controller.

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>

Any advice that anyone can offer would be greatly appreciated, excuse me if I'm doing anything obviously stupid this is my first time round with Angular!

Andy
  • 35
  • 6
  • You need to write one more helper directive. – dfsq Jan 07 '16 at 19:12
  • @dfsq don't leave me hanging :) haha any clues or documentation I can go read to clue up on this? – Andy Jan 07 '16 at 19:17
  • I guess you mean something along the lines of this answer - http://stackoverflow.com/questions/28414568/angularjs-templateurl-fails-to-bind-attributes-inside-ng-repeat – Andy Jan 07 '16 at 19:25
  • It can be something like this, yes. – dfsq Jan 07 '16 at 19:38

1 Answers1

2

i hope this help you:

for explain: you have to $compile your directive when you want to use it in other directive like ngRepeat or other custom directive...

        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>
Maher
  • 2,517
  • 1
  • 19
  • 32
  • Hi @Maher, thanks for the explanation, I managed to get this working. I ended up changing scope to to {set: '@'} otherwise set was undefined and I changed the output but other than that, it worked great. Thanks very much for your help. – Andy Jan 07 '16 at 20:07
  • @Andy you are welcome, please select as correct answer for others. – Maher Jan 07 '16 at 20:12
  • Oh and changed set="directive" to set="{{directive}}". If you could just update your example for other people then I'll accept it as an answer. Thanks again :) – Andy Jan 07 '16 at 20:13
  • @Andy this changing are custom for other apps, for example in some array maybe we have to send an object like [{directiveName: "yourDirective"}], in this case our {set: "=" [as object]} and in other case like what you have we pass string so change to {set: "@"}... however your question was useful for me. :) – Maher Jan 07 '16 at 20:19
  • Ah, that makes a lot of sense :) I've marked it as the answer as it successfully dug me out of a not so elegant hole I'd put myself in. Thanks again for your help and time! – Andy Jan 07 '16 at 20:45