Question

我不明白为什么它不起作用。

我的控制器中有这个方法：

    $scope.TestFunc = function () {

        alert("TestFunc called");
    }

这是我的HTML：

<button class="btn btn-default btn-column" print-button-spinner  test="TestFunc()" >
    test
 </button>

这是我的指示：

App.directive('printButtonSpinner', function() {
    return {
        scope:
        {
            docType: '@',
            test: '&'
        },

        restrict: 'A',

        link: function (scope, element) {
            var printFunc = scope.test();
            element.bind('click', printFunc);
        }
    };
});

当我加载页面时，此方法会自动触发。我不明白为什么会这样。
当我点击此方法绑定的按钮时，我在浏览器控制台中收到下一条消息：
```
TypeError: eventFns[i] is undefined
eventFns[i].call(element, event);
```

我做错了什么？

非常感谢你的回答！

问题的第二部分：

我需要调用我的控制器方法：

 var printFn = function (docType, element) {/*some code*/}

我需要从我的指令中调用它：

 <button class="btn btn-default btn-column" print-button-spinner doc-type="zebraCurLabels" print="printFn(docType, null)">
 </button>

我的指示：

 App.directive('printButtonSpinner', function() {
        return {
            scope:
            {
                docType: '@',
                print: '&'
            },

            restrict: 'A',

            link: function (scope, element) {
                var print = scope.test;
                element.bind('click', print(scope.docType, element));
            }
        };
    });

浏览器控制台显示下一条消息：

TypeError: eventFns[i] is undefined
eventFns[i].call(element, event);

Answer 1

将此var printFunc = scope.test();更改为var printFunc = scope.test;测试自己的功能名称。

当我加载页面时，此方法会自动触发。我没有明白为什么会这样。

因此，如果您使用scope.test（），它将调用您的TestFunc并将结果分配给printFunc，该结果为空，因为它没有返回任何内容。

它导致你的问题

当我点击按钮时，此方法绑定到，我接下来浏览器控制台中的消息：TypeError：eventFns [i]未定义 eventFns [i] .call（element，event）;

因为点击期望第二个参数作为一个函数，但你只是给它一个值，它会抛出错误。

Plunker

希望有所帮助：）

<强>更新

我更改了test: '='并添加了doc-type="doctypeisHTML"

 element.bind('click', function(){
              print(scope.docType, element);
            });

Plunker

外部范围的Angular指令和方法不起作用

1 个答案: