Изменение родительской области для специальных переменных в угловых выражениях

Question

Я разрабатываю colorpicker с Angular и пытаюсь включить некоторые из идей, которые я видел в других местах, чтобы написать выражение, которое будет вызываться всякий раз, когда пользователь выбирает цвет.

<color-picker on-pick='something($color)'></color-picker> 

Я заметил, что все встроенные в директивах использовать этот стиль рамки связывания, а не говорить, например, передавая функцию прямо на рамки.

<color-picker on-pick='something'></color-picker> 

Примером этого стиля является ngRepeat:

<li ng-repeat='item in items' ng-bind='$index'></li> 

Я понимаю, что выражение something($color) будет оцениваться с родительской области, а не в рамках самой директивы, а это означает, что $color имущество будет должны быть доступны в родительской области для правильной оценки.

Однако, если директива имеет область выделения, она не увидит родителя. Даже если это возможно, я не хочу вставлять переменную $color в эту область.

В том же ключе я видел где-то, что привязка к сфере видимости с использованием &prop будет оценивать выражение в родительской области, а не область действия директивы. Однако, если это так, как можно сделать вызовы вроде on-pick='something($color)', поскольку свойство $ color исходит из области действия директивы, тогда как функция something будет находиться в родительской области?

Угловая документация для ngRepeat относится к этим переменным как «специальные переменные», однако взгляд на источник показывает, что они назначены на область, сгенерированную из некоторой системы отображения блоков. Я изо всех сил старался проследить мимо.

Answer 1

Вы должны использовать привязку "&" для области изоляции вашей директивы.

Так, например, если у вас есть следующая директива:

app.directive("random", function(){ 
    return { 
    scope: { 
     onClick: "&" 
    }, 
    template: "<button ng-click='genRandom()'>generate random</button>", 
    link: function(scope){ 
     scope.genRandom = function(){ 
     scope.onClick({num: Math.random()}); 
     }; 
    } 
    }; 
}); 

Затем, во внешней области видимости, вы могли бы сделать:

<random on-click="doSomethingWithRandom(num)"></random> 

plunker

Другими словами, когда вы вызываете обработчик "&", вы передаете ему объект, где каждый «ключ» является переменной, на которую можно ссылаться извне (но только в контексте вызова функция-обработчик), и каждое «значение» - это значение, установленное для этой переменной.