我努力學習AngularJS，但有一件事我不能繞到我的頭。AngularJS分離範圍：VS =

什麼是使用「&」而不是「=」的好處？我發現的所有教程，演示和文檔告訴我，&評估父範圍中的表達式。但是，當我第一次嘗試從我的指令中對我的控制器進行回調時，我只是對父範圍的函數使用了a = binding，並且它工作正常。

例如，在控制器的範圍foo，需要一個參數bar一個功能，我可以做一個指令申報像

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

，包括像

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

的指令來實現跟&一樣，好像我必須要做

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

和

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

由此看來，我實在看不出優勢。我誤解了&？

編輯：我想，一個有效的除了我的問題是：這是一個壞主意，綁定到父作用域功能使用=代替&？

來源

2014-09-12 James

是執行一種表達對父母的背景下，受益於你的能力？請參閱下面的答案。 – 2014-09-12 13:04:15

增加了更新，並提供了一個有益方案的示例。 – 2014-09-12 13:12:05

看來不同的是，與&綁定，用戶指令修正什麼功能的被稱爲上的父範圍和參數被使用，而一個=結合僅僅意味着經過參考函數參照其中指令可以用任何參數調用。

=並不意味着，雖然，它主要存在於同步嵌套範圍之間的性能，而&意味着給該指令的方式，而無需對外界的知識與「外部」的世界進行互動。

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>

var app = angular.module('app', []); 

app.controller('ParentCtrl', function() { 
    this.func = function (arg) { 
     alert(arg); 
    } 
}) 

app.directive('bindDir', function() { 
    return { 
     scope: { 
      funcIs: '=', 
      funcAnd: '&' 
     }, 
     template: '<button ng-click="funcIs(\'=\')">=</button><button ng-click="funcAnd({arg:\'&\'})">&amp;</button>' 
    } 
});

來源

2014-09-12 12:32:20

謝謝，通過增加的例子，這使得它更清晰。 – James 2014-09-12 13:27:55

Official docs。

@或@attr - 結合一個本地範圍屬性來DOM屬性的值。結果總是一個字符串，因爲DOM屬性是字符串。

=或= ATTR - 建立本地範圍屬性，並經由ATTR屬性的值定義的名稱的父範圍屬性之間的雙向綁定。

&或& ATTR - 提供了一種在父範圍的上下文中執行的表達式。

延伸閱讀：Understanding-Scopes。

來源

2014-09-12 12:22:25

'=' 給出雙向數據綁定。這意味着如果您改變指令中表達式的值，它也會在控制器中進行更改。這被稱爲污染控制器。

'&'更好，更模塊化。您可以傳入該函數，並將在控制器的範圍內執行，但無法更改控制器範圍中的函數。

請參閱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; 
     } 
    } 
});

來源

2014-09-12 12:37:28 Cathal

是否能夠針對父母的上下文執行表達式對您有好處？下面的第一個例子作爲一個函數執行myLocalModel，與'='不同，你已經得到了結果。

template: "{{ myLocalModel() }}"

開始加入更新01

例如，您可能有2個屬性與表達，而您只需要執行任何一個根據條件。這可以節省執行時間。對你有利嗎？

端更新01

對父母的上下文中的 '&'

，執行表達式。 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

的 '='

，Sync與現有模型。 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

來源

2014-09-12 12:57:47

AngularJS分離範圍：VS =

回答

對父母的上下文中的 '&'

的 '='

相關問題