2013-06-23 3 views
26

В этом коде:В угловом, что означает амперсанд в директиве?

app.directive('myCustomDirective', function() { 
    return { 
    restrict: 'EA', 
    scope: { value: '=myCustomDirective', clickable: '&', editing: '=' }, 
    template: '<span ng-click="handleClick()" ng-bind="value"></span>', 
    ... 

Что clickable: '&' обозначают?

Когда я нахожу Угловую документацию, я не могу ее понять. Кажется, что он написан в коде catch-22, который может быть понят только людьми, которые уже понимают, что объясняется.

Например, я нашел this video, что, по-видимому, объясняет вещь &, но он может также говорить по-китайски.

+2

Я с вами в документации по API. Это примерно так же полезно, как MSDN (читайте: не очень полезно), если вы новичок. –

ответ

15

Update: Новая директива API является here

Существует еще несколько объяснений по Understanding Scopes doc, и они обеспечивают эту полезную link.

Когда я хотел понять это, я сделал Fiddle.

angular.module('scopePropertiesModule', []) 
    .directive('scopeProps', function(){ 
    return { 
     restrict: 'C', 
     scope: {parameterTitle:'@', 
       bidirecTitle:'=', 
       delegateDisplay:'&'}, 
     template: '<div>' + 
        'Parameter title :<br>' + 
        '<input ng-model="parameterTitle"> => {{parameterTitle}}<br>'+ 
        '<br>' + 
        'Biderectional title :<br>' + 
        '<input ng-model="bidirecTitle"> => {{bidirecTitle}}<br>' + 
        '<br>' + 
        'Delegate display :<br>' + 
        '{{delegateDisplay()}}<br>' + 
        '</div>' 
    } 
}); 

и разметка:

<div class="scopeProps" 
    parameter-title="{{title}}" 
    bidirec-title="title" 
    delegate-display="displayTitle()"></div> 

Не стесняйтесь играть с ним.

+19

понимание областей документа очень сложно понять –

+7

Им следует написать руководство «Понимание« Пояснения к областям » –

+3

Было бы лучше, если бы вы явно ответили в ответ. То, как сейчас, ответ читает что-то вроде этого: * «Ответ заключается в том, что если вы используете эти ссылки, или если вы изучите мой блок кода, возможно, вы сами сможете найти ответ, но я не скажу вам» * –

8

http://docs.angularjs.org/guide/directive (быстрый поиск «рамки»)

Из документов:

& или & атр - обеспечивает способ выполнения выражения в контексте родительской области. Если имя attr не указано, предполагается, что имя атрибута совпадает с локальным именем. Определенное и видимое определение области: {localFn: '& myAttr'}, затем изолировать свойство scope localFn будет указывать на оболочку функции для выражения count = count + value. Часто желательно передавать данные из изолированной области видимости через выражение и в родительскую область, это можно сделать, передав карту локальных имен переменных и значений в оболочку выражения fn. Например, если выражение является приращением (количеством), мы можем указать значение суммы, вызывая localFn как localFn ({amount: 22}).

6

Это означает, что при обращении к интерактивными переменной в директиве сферы, Угловое оценивает связанное выражение в родительской области и присваивает результат переменной. Например, если вы включите директиву в вашем HTML коде таким образом:

<my-custom-directive ... clickable='initialized && i > 0' ...> 

Угловые рассчитают initialized && i > 0 выражения в контексте сферы страницы контроллера и присвоить результат щелчков переменного в рамках директивы. Это будет сделано динамически, переменная директивы обновляется каждый раз при изменении значения выражения.

+1

Спасибо, это полезно. – Cheeso

+0

Я не уверен, что переменная директивы автоматически обновляется; «директивная переменная» - это функция, которую вы должны явно вызывать, чтобы оценить это выражение. – cipak