javascript - AngularJS 使用来自 Controller 的指令

标签 javascript angularjs

我需要在 Angular 1.6.* 中使用来自 Controller 的指令。

我用代码解释得更好。

Controller

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

HTML

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

我的解决方案是:

Controller

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

HTML

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

但我的解决方案依赖于 DOM,是一个糟糕的解决方案。
我需要一个智能解决方案。

有什么想法吗?

谢谢!

最佳答案

您可以创建自己的指令,它将为您执行此绑定(bind),类似于 ng-bindng-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>

关于javascript - AngularJS 使用来自 Controller 的指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46911510/

相关文章:

javascript - 如果失败但使用不同的参数来获取默认数据,则调用相同的 http 请求

javascript - jshint 理解 Angular 吗?

javascript - AngularJS watch 无法检测到输入范围 ng-model 的变化

javascript - session 值 ASP.NET 中的简单逗号

javascript - jQuery 过滤器有时会显示所有元素

javascript - Ember 是否支持依赖于其他库的库?

javascript - 为什么 Meteor 中需要导入包

javascript - Highchart 的 x 轴未显示正确的数据

angularjs - Angular js : How to use of ng-click with ng-if

javascript - 如何将 Typescript 枚举的值添加到我的 javascript 函数中?