AngularJS 使用來自控制器的指令

Question

我需要在 angular 1.6.* 中使用來自控制器的指令。

我用代碼解釋得更好。

控制器

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

HTML

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

我的解決辦法是：

控制器

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

HTML

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

但我的解決方案依賴於 DOM，是一個糟糕的解決方案。
我需要一個聰明的解決方案。

有任何想法嗎？

謝謝！

Answer 1

您可以創建自己的指令，該指令將為您執行此綁定，類似於ng-bind和ng-bind-html 。

請考慮以下示例：

指示

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);

在 HTML 中的使用

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

Answer 2

我會在 ngRepeat 中迭代並直接放置指令，只更改需要的內容。 集合在控制器中定義

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