Question

&始终被描述为在指令的隔离范围内调用父作用域上的函数的方法。

但是，由于=创建了双向绑定，而函数只是另一个值，所以它不应该同样有效吗？

我看到的唯一区别是使用＆amp;，您可以修改传递的函数而不影响父级，因为它是单向绑定。

那么为什么&通常推荐=用于此用例？

我也遇到过一些奇怪的行为。使用&为您提供函数包装器。如果你在控制器中打开并调用它，它的解析方式与你在指令中按ng键点击它的方式不同。

我已经在this fiddle中设置了一个实验：

app.directive('myDir', function() {
    return {
        restrict: 'E',
        template: '<button ng-click="parentFunc1()(1); parentFunc2(1)">Directive</button>', 
        scope: {
           parentFunc1: '&func1',
           parentFunc2: '=func2',
        },
        controller: Ctrl2,
    }
});

function Ctrl2($scope) {
    //Step 1
    console.log($scope.parentFunc1);
    $scope.parentFunc1()(1);
    $scope.parentFunc2(1);

    //Step 2
    $scope.oldParent1 = $scope.parentFunc1;
    $scope.parentFunc1 = function (value) {
        console.log(value+1);
    };
    $scope.parentFunc1(1);
    $scope.parentFunc2(1);

    //Step 3    
    $scope.parentFunc1 = $scope.oldParent1;
    $scope.parentFunc2 = function (value) {
        console.log(value+2);
    };
    console.log($scope.parentFunc1);
    $scope.parentFunc1()(1);
    $scope.parentFunc2(1);

    //Step 4 -> Click the directive button
}

function Ctrl($scope){
    $scope.foo = function (value) {
        console.log(value);
    };
}

这记录＆＃34; 1,1; 2,1; 1,2; 2,2＆＃34 ;.最后两对值让我感到困惑，因为它们似乎执行相同的代码。

Answer 1

非常好的问题！

查看&和=之间的区别很简单。

当您声明指令范围并添加到&时，这意味着您在范围内声明函数，而不是=它是:"&func"对于常规属性。

等待等待，上面的两个例子刚刚起作用，它们都是功能！

那是真的，但坚持下去，

您刚才使用不当。使用<script type="text/javascript"> angular.module("exampleApp", []) .directive("scopeDemo", function (){ return { template: "<div><p>Name: {{local}}, City: {{cityFn()}}</p></div>", scope:{ local: "=nameprop", cityFn: "&city" } } } }).controller("scopeCtrl, function($scope){ $scope.data = { name: "Shahar", defaultCity: "London" }; $scope.getCity = function(name){ return name == 'Shahar' ? $scope.data.defaultCity : "unknown"; } }); </script> <body ng-controller="scopeCtrl"> <div> Direct Binding: <input ng-model="data.name" /> </div> <div scope-demo city="getCity(data.name)" nameprop="data.name"></div> //Reference 1. </body>表示您正在添加即将评估的功能。

混淆？

我会输入一个完美的例子：

{{1}}

正如您所看到的，我已经为我的范围指令写了两个属性。一个接受一个财产，一个接受一个功能。正如您所看到的，该指令的结果相当沉闷，但它解释了整个问题。

如果您尝试使用'='创建函数，则不会成功，因为Angular会忽略它。

我希望它清除它。

祝你好运！

Answer 2

{| 1}}和&绑定策略之间的区别发生在您希望在父作用域上调用函数时，参数也从父作用域传递。

假设您有以下控制器：

和HTML：

angular.module('myApp').controller('myCtrl', function() {
  $scope.mans = [{name: 'Peter'}, {name: 'Alex'}]

  $scope.someMethod = function(par) {
     console.log(par);
  }
});

在这种情况下，<div ng-repeat="man in mans"> <button my-dir="someMethod(man.name)">Click me</button> </div>指令应该只使用myDir绑定策略，因为指令在传递参数时都不知道。

＆amp;和和=用于传递函数以隔离范围

2 个答案: