Question

我有一个指令，使用＆＃34;＆amp;＆＃34;在我的控制器中调用一个函数。调用工作，我的函数被执行，但参数不会发送到函数，我得到'＃undefined＆＃39;。

指令：

angular.module("tiki").directive("inputFile", function(){

return {

    restrict:"A",
    scope:{

        onFile: "&",

    },
    controller:function($scope, $element, $attrs){

        var inputFile = $element.find("input")[0]

        $element[0].addEventListener("click", function(){

            inputFile.click()

        })

        inputFile.addEventListener("change", function(e){

            var file = inputFile.files[0]

            var reader = new FileReader()

            reader.addEventListener("load", function(){

                $scope.onFile(reader.result)

            })

            reader.readAsDataURL(file)

        })

    }

}

})

控制器：

angular.module('tiki').controller("tiki.controller.settings.edit", ["$scope", "editTiki", function($scope, editTiki){

    $scope.onFile = function(file){

        console.log(file)

    }

}])

HTML

<li input-file on-file="onFile()"><input type="file" style="display:none;"></li>

Answer 1

＆安培;经常被误解，因为角度doc的引用传递函数的主要例子。然而，什么＆amp;实际上是在指令范围中添加一个函数，在调用时，该函数根据指令的父范围计算表达式并返回结果。表达式不一定是函数。它可以是任何有效的Angular表达式。

这是一种实现单向绑定的方法。

所以

on-file="onFile(fileObj)"

创建此函数（注意 - 这是简化的。实际的实现已经过优化，因此每次调用函数都不会调用$ parse）：

scope.onFile = function(locals) {
    return $parse(attrs.onFile)(scope.$parent, locals);
}

注意＆＃34;当地人＆＃34;参数。这是启用第二个例子的原因

$scope.onFile({fileObj:reader.result})

{fileObj: reader.result} <---locals

当你将locals传递给$ parse返回的函数时，angular会替换对它找到的那些通常使用locals map中的值归属于父作用域的locals的所有引用。

请注意，如果你没有传入当地人，而只是做了：

$scope.onFile()

然后angular将运行父作用域的onFile函数，并假设fileObj是父作用域的属性或全局对象。如果它既不是，那么它将在函数中未定义。

当你通过时：

on-file="onFile"

然后调用指令的结果

scope.onFile()

方法是父范围的onFile函数，所以要调用我们只需要传递数据的函数：

scope.onFile() === scope.$parent.onFile

scope.onFile()(reader.result)

相当于

scope.$parent.onFile(reader.result)

Answer 2

正确答案实际上就是这样：

选项1： 将参数作为对象文字发送。

HTML：

<li input-file on-file="onFile(fileObj)"><input type="file" style="display:none;"></li>

指令：

            reader.addEventListener("load", function(){

                $scope.onFile({fileObj:reader.result})

            })

选项2： 返回一个函数并使用参数列表

调用它

HTML：

<li input-file on-file="onFile"><input type="file" style="display:none;"></li>

指令：

        reader.addEventListener("load", function(){

            $scope.onFile()(reader.result)

        })

一些阅读材料：

使用“＆amp;”调用从指令到控制器的功能不发送参数

2 个答案: