Нужны примеры привязки атрибутов в пользовательских тегах AngularJS
Я пытаюсь создать пользовательский тег, подобный следующему:
<mytag type="Big" />
где тип - это атрибут, который связывается с компонентом. таким образом, что он устанавливает текст в метке, как показано ниже:
<label>{{type}}</label>
... (другие компоненты)...
Как сказано в документации, у меня есть контроллер, который устанавливает тип по умолчанию:
$scope.type = "Small";
так что, если я использую свой тег без типа атрибута, он все равно будет установлен.
Я пытаюсь сделать привязку с помощью директивы:
angular.module('TestPage',[])
.directive('mytag',function() {
return {
restrict: 'E',
templateUrl: 'component.html',
scope: {
type: '='
}
}
});
Обратите внимание, что у меня есть соответствующие настройки ng-app в моем шаблоне компонента (ng-app="TestPage").
Моя проблема в том, что привязка к типу, по-видимому, ничего не связывает.
Я прочитал документацию о том, как связать переменную с компонентами, используя директиву. Согласно документации, вы можете делать такие привязки внутри области. Видимо, области видимости могут содержать "объектный хеш" (что бы это ни было!), Который создает нечто, называемое "изолированной областью действия" (???). Такие области могут представлять "локальные свойства" следующими способами:
@ или @attr - привязать свойство локальной области к атрибуту DOM. Результатом всегда является строка, поскольку атрибуты DOM являются строками. Если имя атрибута не указано, то локальное имя и имя атрибута совпадают. Учитывая и определение виджета области видимости: { localName:'@myAttr' }, то свойство области виджета localName будет отражать интерполированное значение hello {{name}}. При изменении атрибута name будет изменяться свойство localName в области виджета. Имя читается из родительской области (не из области компонента).
Да??? Какое все это имеет отношение к правильному синтаксису для привязки?
= или = выражение - установить двунаправленную привязку между локальным свойством области действия и родительским свойством области действия. Если имя атрибута не указано, то локальное имя и имя атрибута совпадают. Учитывая и определение виджета области видимости: { localModel:'=myAttr' }, тогда свойство области виджета localName будет отражать значение parentModel в родительской области видимости. Любые изменения в parentModel будут отражены в localModel, а любые изменения в localModel будут отражены в parentModel.
Извините меня? Что здесь говорят???
& или &attr - предоставляет способ выполнить выражение в контексте родительской области. Если имя атрибута не указано, то локальное имя и имя атрибута совпадают. Для данного виджета и определения видимости области: { localFn:'increment()' }, а затем изолирующее свойство области localFn будет указывать на функцию-обертку для выражения increment (). Часто желательно передавать данные из области изолята через выражение и в родительскую область, это можно сделать путем передачи карты имен и значений локальных переменных в оболочку выражения fn. Например, если выражение является приращением (количеством), то мы можем указать значение суммы, вызвав localFn как localFn({amount: 22}).
Теперь я в полном замешательстве! У вас есть теги виджетов и какая-то связанная функция, которую я должен написать для того, чтобы сделать привязку??? Все, что я хочу, это привязать значение к метке метки!
Я скопировал приведенный выше текст из документации ( http://docs.angularjs.org/guide/directive), чтобы подчеркнуть: этот документ выглядит как старая документация UNIX: действительно полезен для тех, кто уже знает систему, но не так полезно для начинающих, которые пытаются развить реальный опыт. Со всеми уроками, которые показывают, как выполнять простые задачи в AngularJS (отлично подходит для игрушечных приложений, но не так хорошо для видов клиентских приложений, которые я хочу создать), почему нет более сложных вещей???
Хорошо, время для меня, чтобы быть более конструктивным.
Может кто-нибудь предоставить несколько простых примеров того, как сделать различные привязки, которые так трудно описать в этой документации??? Примеры, которые показывают правильный синтаксис для этих операторов области действия и описания (на простом английском языке) того, как именно они возвращаются к атрибуту, добавляемому в пользовательский тег???
Спасибо за ваше терпение и заранее спасибо за любую помощь.
2 ответа
Ты довольно близко..
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's scope */
controltype: '=typeattribute',
/* reference a function from the parent through
funcattribute="somefunc()" and stick it our
directive's 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' }... где = представляет собой двусторонний сценарий связывания. Если вы измените это = к @ вы увидите, что он просто позволяет передавать строку в качестве атрибута директивы. & предназначен для выполнения функций из контекста родительской области.
Надеюсь, это поможет.
РЕДАКТИРОВАТЬ: Вот рабочая PLNKR
Я тоже немного боролся с этой документацией, когда впервые начал изучать английский язык, но я попытаюсь прояснить для вас кое-что. Во-первых, при использовании этого scope свойство, оно создает "изолированную область видимости". Все это означает, что он не будет наследовать какие-либо свойства от родительских областей, и поэтому вам не нужно беспокоиться о каких-либо коллизиях в области видимости.
Теперь нотация '@' означает, что оцененное значение в атрибуте будет автоматически привязано к вашей области действия для директивы. Так, <my-directive foo="bar" /> в конечном итоге с областью, имеющей свойство под названием foo который содержит строку "бар". Вы также можете сделать что-то вроде <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 соответственно.
Надеюсь, это поможет. Не стесняйтесь задавать вопросы, с помощью которых я могу уточнить свой ответ.