AngularJS 使用来自控制器的指令

Question

i need to use directive from controller in angular 1.6.*.

I explain better with code.

Controller

$scope.directive = [
   "<span my-directive></span>",
   "<span my-directive2></span>",
   "<span my-directive3></span>"
]

HTML

<div>{{directive}}</div>

My solution is:

Controller

directive.forEach(function (item) {
    $compile(item)($scope).appendTo('.navbar');
})

HTML

<div class="navbar"></div>

But my solution is DOM dependent, is a bad solution.
I need a smart solution.

Any ideas?

Thanks!

Answer 1

You could create your own directive which will do this binding for you similarly to ng-bind and ng-bind-html .

Please consider the following example:

Directive

function MyBindCompileDirective($compile) {
    return {
        restrict: 'A',
        link(scope, elem, attrs) {
            attrs.$observe('myBindCompile', () => elem.html($compile(scope.myBindCompile)(scope).html()))
        }
    };
}

angular
    .module('app')
    .directive('myBindCompile', MyBindCompileDirective);

Usage in HTML

<div ng-repeat="item in directives" my-bind-compile="item"></div>

Answer 2

I would iterate in a ngRepeat and put the directive directly, changing only what is needed. collection is defined in the controller

<div ng-repeat="model in collection">
 <span my-directive variable="model"></span>
</div>