'＆amp; '

Question

我正在努力学习AngularJS，但有一件事我无法解决。

使用“＆amp;”有什么好处？超过“=”？我发现的所有教程，演示和文档都告诉我＆amp;计算父范围中的表达式。但是，当我第一次尝试从我的指令对我的控制器进行回调时，我只使用了=绑定到父作用域上的函数，并且它工作正常。

例如，如果控制器范围foo上的函数带有参数bar，我可以执行指令声明，如

scope: { callback: '=' },
template: '<div ng-click="callback(value)"></div>'

并包含指令，如

<my-directive callback="foo"></my-directive>

为了实现与＆amp;相同，我似乎必须这样做

scope: { callback: '&' },
template: '<div ng-click="callback({bar:value})"></div>'

和

<my-directive callback="foo(bar)"></my-directive>

由此，我没有看到优势。我误解了吗？

编辑：我想我的问题的一个有效补充是：使用=而不是＆amp;？

绑定到父作用域函数是一个坏主意

Answer 1

看起来差异在于&绑定，指令的 user 修复了在父作用域上调用的函数以及使用了哪些参数，而{{1}绑定只是意味着传递一个引用函数引用，该引用可以使用任何参数调用。

=并不意味着它，但它主要用于同步嵌套作用域之间的属性，而=意味着为指令提供与外部＆＃39;外部交互的方式＃39;没有了解外部世界的世界。

example of both

<div ng-app="app" ng-controller="ParentCtrl as parentCtrl">
    <bind-dir func-is="parentCtrl.func" func-and="parentCtrl.func(arg)"></bind-dir>
</div>

Answer 2

Official docs

@ 或 @attr - 将本地范围属性绑定到DOM属性的值。结果总是一个字符串，因为DOM属性是字符串。


= 或 = attr - 设置本地范围属性与通过attr属性值定义的name的父范围属性之间的双向绑定。 / p> <小时/>


＆amp; 或＆amp; attr - 提供了在父作用域的上下文中执行表达式的方法。
<小时/>

进一步阅读：Understanding-Scopes。

Answer 3

'='提供双向数据绑定。这意味着如果在指令中更改表达式的值，它也会在控制器中更改。这称为污染控制器。

'＆安培;'更好，更模块化。您可以传入该函数，它将在控制器的范围内执行，但您无法更改控制器范围中的函数。

请参阅http://jsfiddle.net/b6ww0rx8/，它会更清晰一些。

<div ng-app="myApp">
    <div ng-controller="MyController">
        <div my-directive
            callback1="aFunction"
            callback2="anotherFunction()">

            </div>
        <button ng-click="test()">click me</button>
    </div>
</div>

angular.module('myApp', [])

.controller('MyController', function($scope) {

    $scope.aFunction = function() {
        console.log('abc');
    };
    $scope.anotherFunction = function() {
        console.log('def');
    };
    $scope.test = function () {
        console.log($scope.aFunction);
        console.log($scope.anotherFunction);

    };
    console.log($scope.aFunction);
    console.log($scope.anotherFunction);
})

.directive('myDirective', function(){
    return {
        scope: {
            callback1: '=',
            callback2: '&'
        },
        link: function (scope, element, attrs) {
            scope.callback1 = 123;
            scope.callback1 = 456;
        }
    }
});

Answer 4

针对父级上下文执行表达式的能力是否对您有益？下面的第一个示例将myLocalModel作为函数执行，与'='不同，您已经得到了结果。

template: "{{ myLocalModel() }}"

开始添加更新01

例如，您可能有2个带表达式的属性，并且您只想根据条件执行任何一个属性。这可以节省执行时间。对你有益吗？

结束更新01

'＆amp; '

，针对父级的上下文执行表达式。 http://ngtutorial.com/learn/directive.html#/exec-expr

angular.module("myApp", []).directive("myCustom", function(){
  return {
    restrict: 'EA',
    scope: {
        myLocalModel: '&theElementsAttrName',
    },
    // note that myLocalModel is a function
    template: "{{ myLocalModel() }}"
  };
});
........

<body ng-app="myApp">

<div ng-init="ParentModel='the parents value';
              ParentNum1=100;
              ParentNum2=200"></div>

    <div ng-controller="CreateChildScopeController">
        my-custom 1) <my-custom the-elements-attr-name="ParentModel + ' ---> adding more'"></my-custom><br/>
        my-custom 2) <my-custom the-elements-attr-name="ParentNum1 + 12"></my-custom><br/>
    </div>

    my-custom 3) <my-custom the-elements-attr-name="ParentNum2 + 12"></my-custom><br/>

</body>


.... output

my-custom 1) the parents value ---> adding more
my-custom 2) 112
my-custom 3) 212

' = '

，与现有模型同步。 http://ngtutorial.com/learn/directive.html#/sync-existing

angular.module("myApp", []).directive("myCustom", function(){
  return {
    restrict: 'EA',
    scope: {
        myLocalModel: '=theElementsAttrName',
    },
    template: "{{ myLocalModel }}"
  };
});

.....

<body ng-app="myApp">

<div ng-init="ParentModel='the parents value';
              ParentNum1=100;
              ParentNum2=200"></div>

    <div ng-controller="CreateChildScopeController">
        my-custom 1) <my-custom the-elements-attr-name="ParentModel"></my-custom><br/>
        my-custom 2) <my-custom the-elements-attr-name="ParentNum1"></my-custom><br/>
    </div>

    my-custom 3) <my-custom the-elements-attr-name="ParentNum2"></my-custom><br/>

</body>

..... output

my-custom 1) the parents value
my-custom 2) 100
my-custom 3) 200

AngularJS隔离范围：＆amp; vs =

4 个答案:

'＆amp; '

' = '