0

Trying to get angular to render a list of directives after a drop-down is toggled in bootstrap.

Ideally, I'll $scope in the main view Ctrl:

$scope.directiveList = ['messages', 'events', 'cart'];

and in the html

<div ng-repeat="directive in directive-list">
  <{{directive}}/>
</div>

the results i'm getting are plain text, i.e. . I've tried to modify another helper directive I learned that renders normal html elements fine but doesn't render custom expressions. Here's that directive code:

.directive("notify", function(){
    return {
        restrict:"EA",
        scope:{element:"="},
        link:function(scope, iElem) {
            var domElement = document.createElement(scope.element);
            iElem.append(domElement);

        }
    };
});

This code renders the element in plain text as well tho it doesn't show in the view. Any help, as always, is much appreciated! Thanks in advance!

Ivan Nevostruev
  • 28,143
  • 8
  • 66
  • 82
irth
  • 1,696
  • 2
  • 15
  • 24
  • 1
    Have a look at http://docs.angularjs.org/api/ng/service/$compile - this actually is for things like this - you can do something like `$compile(iElem)(scope)` – conceptdeluxe Apr 16 '14 at 01:29
  • Thanks, this is the right path. The directive is rendering! Any idea of an elegant way to pass in the scope from the view controller without using a service? Tried passing in $parent to the directive but nope. – irth Apr 16 '14 at 02:10
  • 1
    When removing `scope:{}` your directive will use the parent scope - maybe have a look at http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482 :) – conceptdeluxe Apr 16 '14 at 10:59
  • i'll digest this. i've been a bit lazy understanding isolate scope and just relied on the view controller. learning to componentize my code more. thanks much! – irth Apr 16 '14 at 19:56

0 Answers0