AngularJS isolate scope: & vs =

Question

Я пытаюсь изучить AngularJS, но есть одна вещь, с которой я не могу окутать голову.

В чем преимущество использования "&" over "="? Все обучающие материалы, демонстрации и документация, которые я нашел, говорят мне, что & оценивает выражение в родительской области. Однако, когда я впервые попытался выполнить обратные вызовы с моим контроллером из моей директивы, я просто использовал привязку a = к функции в родительской области, и она работала нормально.

Например, с помощью функции по области видимости контроллера 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> 

Исходя из этого, я не вижу преимущество. Не поняли ли я &?

EDIT: Я полагаю полезное дополнение на мой вопрос: Является ли это плохая идея привязать к функции области видимости родительской используя = вместо &?

Answer 1

Разница, кажется, что с & связывания, то пользователя из директивы исправлений, какие функция вызывается в родительской области, и какие параметры используются, в то время как = связывание просто означает передачу ссылки опорной функции которой директива может вызывать любые аргументы.

не предназначен для этого, но он существует главным образом для синхронизации свойств между вложенными областями, в то время как & означает директиву, способ взаимодействия с внешним миром без знания внешнего мира.

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>' 
    } 
}); 

Answer 2

Official docs.

@ или @attr - связать локальную область свойство к значению атрибута DOM. Результатом всегда является строка, поскольку атрибуты DOM являются строками.

---

= или = атр - создать двунаправленное связывание между локальной областью видимости собственностью и родительской областью свойством имени, определенным посредством значения атрибута атра.

---

& или & атр - обеспечивает способ выполнить выражение в контексте родительской области.

---

Дополнительная информация: 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

'&'

, Execute выражение против контекста родителя. 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