Нужны некоторые примеры привязки атрибутов в пользовательских тегах AngularJS

Ответ 1

Ты очень близко...

app.directive('mytag',function() {
    return {
        restrict: 'E',
        template: '<div>' +
            '<input ng-model="controltype"/>' + 
            '<button ng-click="controlfunc()">Parent Func</button>' + 
            '<p>{{controlval}}</p>' + 
         '</div>',
        scope: {
            /* make typeattribute="whatever" bind two-ways (=)
            $scope.whatever from the parent to $scope.controltype
            on this directive scope */
            controltype: '=typeattribute',
            /* reference a function from the parent through
               funcattribute="somefunc()" and stick it our
               directive scope in $scope.controlfunc */
            controlfunc: '&funcattribute',
            /* pass a string value into the directive */
            controlval: '@valattribute'
        },
        controller: function($scope) {                  
        }
    };
});

  <div ng-controller="ParentCtrl">
       <!-- your directive -->
       <mytag typeattribute="parenttype" funcattribute="parentFn()" valattribute="Wee, I'm a value"></mytag>
       <!-- write out your scope value -->
       {{parenttype}}
  </div>


  app.controller('ParentCtrl', function($scope){ 
       $scope.parenttype = 'FOO';
       $scope.parentFn = function() {
           $scope.parenttype += '!!!!';
       }
  });

Магия в основном определяется объявлением scope: в определении вашей директивы. с любым scope: {} в нем будет "изолировать" область действия от родителя, что означает, что она получает свою собственную область... без этого она будет использовать родительскую область. Остальная часть магии находится в свойствах области: scope: { 'internalScopeProperty' : '=externalAttributeName' }... где = представляет собой сценарий двухсторонней привязки. Если вы измените этот = на @, вы увидите, что он просто позволяет передать строку как атрибут директивы. & предназначен для выполнения функций из контекста родительской области.

Я надеюсь, что это поможет.

EDIT: Вот рабочий PLNKR

Ответ 2

Я тоже немного боролся с этой документацией, когда впервые попал в angular, но я попытаюсь прояснить ситуацию для вас. Во-первых, при использовании этого свойства scope он создает "изолированную область". Все это означает, что он не наследует никаких свойств из родительских областей, и поэтому вам не нужно беспокоиться о каких-либо столкновениях в пределах области.

Теперь обозначение "@" означает, что оцениваемое значение в атрибуте автоматически привязается к вашей области действия для этой директивы. Таким образом, <my-directive foo="bar" /> будет иметь область, имеющую свойство foo, которое содержит строку "bar". Вы также можете сделать что-то вроде <my-directive foo="{{bar}}" И тогда оцененное значение {{bar}} будет привязано к области. Поскольку атрибуты всегда являются строками, вы всегда будете иметь строку для этого свойства в области при использовании этих обозначений.

Обозначение '=' в основном обеспечивает механизм передачи объекта в вашу директиву. Он всегда извлекает это из родительской области директивы, поэтому у этого атрибута никогда не будет {{}}. Итак, если у вас есть <my-directive foo="bar" />, он свяжет все, что находится в $scope.bar, в вашей директиве в свойстве foo вашей области действия. Любые изменения, внесенные вами в foo в пределах вашей области действия, будут отбираться в bar в родительской области и наоборот.

Я не использовал '&' но почти так же, как и у других, поэтому я не знаю, как эти два. Насколько я понимаю, он позволяет оценивать выражения из контекста родительской области. Поэтому, если у вас есть что-то вроде <my-directive foo="doStuff()" />, всякий раз, когда вы вызываете scope.foo() в своей директиве, он вызывает функцию doStuff в родительской области директивы. Я уверен, что с этим вы многое можете сделать, но я не так хорошо знаком с этим. Возможно, кто-то еще может объяснить это более подробно.

Если в области задан только символ, он будет использовать то же имя, что и атрибут для привязки к области директив. Например:

scope: {
   foo1: '@',
   foo2: '=',
   foo3: '&'
}

При включении директивы должны быть атрибуты foo1, foo2 и foo3. Если вы хотите, чтобы свойство в вашей области действия отличалось от имени атрибута, вы можете указать это после символа. Таким образом, приведенный выше пример был бы

scope: {
   foo1: '@bar1',
   foo2: '=bar2',
   foo3: '&bar3'
}

При включении директивы должны быть атрибуты bar1, bar2 и bar3, и они будут связаны в области под свойствами foo1, foo2 и foo3 соответственно.

Надеюсь, это поможет. Не стесняйтесь задавать вопросы, на которых я могу прояснить свой ответ.