名为 directive angularjs 的变量

Variable named directive angularjs

本文关键字：变量 angularjs directive 名为      更新时间：2023-09-26

我正在寻找一种实现变量指令的方法：

.constant('BLADES', [
        {
            "name":"static",
            "order":1,
            "image": "img/blade_images/widgets-01.png"
        },
        {
            "name":"static",
            "order":2,
            "image": "img/blade_images/widgets-01.png"
        },
        {
            "name":"static",
            "order":3,
            "image": "img/blade_images/widgets-01.png"
        }
    ])

使用上面从服务器数据填充的常量，我想定义要在页面上加载的指令

<div ng-repeat="blade in blades">
    <{{name}}-directive image="{{image}}">
    </{{name}}-directive>   
</div>

但是以上都行不通，有人有什么想法吗？

你试图做的事情是不可能的（参见文档）。指令名称必须在编译开始时就已经解析。{{bindings}}的插值是作为编译过程的一部分完成的 - 在所有模板代码已经被读取和解析为指令名称等之后。

为了达到你的目标，你需要先用其他工具预处理你的模板，然后让AngularJS只在它包含解析的指令时才编译它。

根据评论中的讨论，我给你一个非常原始的包装器指令的例子，你必须对其进行修改才能使其可用。

包装器指令

    <wrapper item="selected"></wrapper>

然后在包装中

.directive('wraper', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            item: "="
        },
        link: function (scope, element, attrs) {
            var directive = item + '-directive';
            var html = '<' + directive + '></' +  directive + '>';
            var e =$compile(html)(scope);
            element.replaceWith(e);
        }
    };
});
相关文章：