从指令中调用Angular控制器函数

Calling Angular controller function from directive

本文关键字：控制器 函数 Angular 调用 指令      更新时间：2023-09-26

我在Angular中有一个自定义指令，它需要调用控制器中的函数，传递一些数据。控制器和指令的代码如下。在我的指令中，当我调用scope.modify(data);时，它调用控制器中的函数，但它似乎没有传递数据(它将数据打印为未定义)。为什么会这样?

我的控制器有一个功能，modify()，有一些逻辑:

$scope['modify'] = function(data) {
    var obj = $scope['template']();
    console.log(data);
    // ... do stuff with data
}

我从我的指令中调用它，它从文件中读取数据。

app.directive("modifyBtn", function($compile) {
    return {
        restrict: "E",
        scope: {
            modify:"&"
        },
        link: function(scope, element, attrs) {
            var fileElem = angular.element(element.find("#file_input2"));
            var upload = function() {
                var file = fileElem[0].files[0];
                var reader = new FileReader();
                reader.readAsText(file);
                reader.onload = function(e) {
                    var data = {};
                    // read JSON content from file and store as data
                    console.log(data); // prints correct data
                    scope.modify(data);
                }
            };
            $(fileElem).on("change", upload);
        }
    }
});

最后，这是我的指令，视图侧，在HTML:

<modify-btn modify="modify()">
    <li class="active">
        <span class="btn creation-btn" ng-click="fileshow = true">
            Upload JSON
        </span>
    </li>
    <li>
        <input type="file" id="file_input2" ng-show="fileshow" />
    </li>
</modify-btn>

问题位于使用地点的视图中。使用&绑定，您提供了一个在控制器范围内执行的表达式。表达式是modify()。注意没有参数。控制器函数中的参数未定义。解析:只在模板

中提供函数名
 <modify-btn modify="modify">
相关文章：