Question

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

我的控制器有一个函数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>

Answer 1

问题位于使用地点的视图中。使用&绑定，您可以提供在控制器范围内执行的表达式。表达式为modify()。注意没有参数。 REsult预计在控制器功能中是不确定的。解决方案：仅在模板中提供功能名称

 <modify-btn modify="modify">

从指令调用Angular控制器函数

1 个答案: