Question

我想创建一个动态添加按钮到div的指令。为了传递按钮，我创建了一个json来保存按钮的文本，类和操作，但该功能不会在点击时触发。我做错了什么？

指令模板：

<div>
    <button ng-repeat="button in buttons" ng-class="button.class" ng-click="button.action">
        {{ text }}
    </button>
</div>

指令：应用

.directive("myDirective", function() {
    return {
        restrict: 'E',
        scope: {
            buttons: '=buttons'
        },
        templateUrl: "url/to/template"
    }
});

的index.html：

<my-directive buttons="[
        {
            action: scopeFunction,
            test: 'my text',
            class: 'my-class'
        }
    ]"></my-directive>

编辑：问题不在于人们在这里建议的骆驼外壳。我正在使用另一个名称，该指令有效。只有按钮动作才会触发。

编辑2 ：创建了一个jsfiddle：https://jsfiddle.net/umkzjn42/1/

Answer 1

将名称命名为 myDirective （camelCase）代替 my-directive

.directive("myDirective", function() {
    return {
        restrict: 'E',
        scope: {
            buttons: '=buttons'
        },
        templateUrl: "url/to/template"
    }
});

然后将其用作＆＃39; my-directive＆＃39;

<my-directive buttons="[
        {
            action: scopeFunction(),
            test: 'my text',
            class: 'my-class'
        }
    ]"></my-directive>

Answer 2

你必须用camel-case

编写指令

.directive("myDirective", function() {
    return {
        restrict: 'E',
        scope: {
            buttons: '='
        },
        templateUrl: "url/to/template"
    }
});

然后您可以将其用作

<my-directive buttons="[
    {
        action: scopeFunction(),
        test: 'my text',
        class: 'my-class'
    }
]"></my-directive>

您可以阅读directive in angular

Answer 3

当我们声明指令时，我们需要在camel-case中定义名称。

<强> HTML

<my-directive>

<强> JS

.directive("myDirective", function() {}

JSON中的其他错误您在HTML模板中使用text，并在指令

中传递test

HTML模板中的另一个问题是，您正在传递函数引用，而不是调用函数。使用ng-click="button.action()"代替ng-click="button.action"

查看您的working directive here

Answer 4

<my-directive buttons="[
        {
            action: scopeFunction(),
            test: 'my text',
            class: 'my-class'
        }
    ]"></my-directive>

我认为在定义动作时缺少函数调用的括号。希望能解决问题

将带有函数的对象数组传递给指令

4 个答案: