Question

我希望找到一种实现变量指令的方法：

.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>

但是上述方法不起作用，有没有人有任何想法？

Answer 1

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

要实现目标，您需要首先使用some other tool预处理模板，并且只有在包含已解析的指令时才由AngularJS编译。

Answer 2

根据评论中的讨论，我给你一个非常原始的包装指令示例，你必须解决它才能使它可用。

包装器指令

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

变量命名指令angularjs

2 个答案: