Precisa de alguns exemplos de atributos de binding em tags personalizadas do AngularJS

Eu estou tentando criar uma tag personalizada semelhante à seguinte:

 

onde tipo é um atributo que fica vinculado ao componente. de tal forma que define o texto em um label, como mostrado abaixo:

  

… (outros componentes) …

Como a documentação diz, eu tenho um controlador que define um tipo padrão:

 $scope.type = "Small"; 

para que, se eu usar minha tag sem o tipo de atributo, ainda seja definido.

Eu estou tentando fazer binding usando uma diretiva:

 angular.module('TestPage',[]) .directive('mytag',function() { return { restrict: 'E', templateUrl: 'component.html', scope: { type: '=' } } }); 

Observe que eu tenho as configurações do aplicativo ng apropriadas no meu modelo de componente (ng-app = “TestPage”).

Meu problema é que a binding ao tipo não parece estar realmente vinculando qualquer coisa.

Eu li a documentação sobre como ligar uma variável aos componentes usando diretiva. De acordo com a documentação, você pode fazer essas ligações dentro de um escopo. Escopos aparentemente podem conter um “object-hash” (o que quer que seja!) Que cria algo chamado de “escopo isolado” (???). Esses escopos podem representar “propriedades locais” das seguintes maneiras:

@ ou @attr – liga uma propriedade de escopo local ao atributo DOM. O resultado é sempre uma string, pois os atributos DOM são strings. Se nenhum nome de atributo for especificado, o nome local e o nome do atributo serão os mesmos. Dado e definição de widget do escopo: {localName: ‘@ myAttr’}, a propriedade de escopo do widget localName refletirá o valor interpolado de hello {{name}}. À medida que o atributo name é alterado, a propriedade localName também será usada no escopo do widget. O nome é lido no escopo pai (não no escopo do componente).

Hã??? O que tudo isso tem a ver com a syntax apropriada para binding?

= ou = expressão – configure a binding bidirecional entre uma propriedade de escopo local e a propriedade de escopo pai. Se nenhum nome de atributo for especificado, o nome local e o nome do atributo serão os mesmos. Dada e definição de widget do escopo: {localModel: ‘= myAttr’}, a propriedade de escopo do widget localName refletirá o valor de parentModel no escopo pai. Quaisquer alterações no parentModel serão refletidas no localModel e quaisquer alterações no localModel serão refletidas no parentModel.

Com licença? O que está sendo dito aqui ???

& ou & attr – fornece uma maneira de executar uma expressão no contexto do escopo pai. Se nenhum nome de atributo for especificado, o nome local e o nome do atributo serão os mesmos. Dado e definição de escopo do widget: {localFn: ‘increment ()’}, então, isolar a propriedade de escopo localFn apontará para um wrapper de function para a expressão increment (). Muitas vezes é desejável passar dados do escopo de isolar por meio de uma expressão e para o escopo pai, isso pode ser feito passando um mapa de nomes e valores de variables ​​locais para o wrapper de expressão fn. Por exemplo, se a expressão for increment (amount), podemos especificar o valor da quantia chamando o localFn como localFn ({amount: 22}).

Agora estou totalmente confuso! Você tem tags de widgets e algum tipo de function relacionada que eu tenho que escrever para fazer o bind ??? Tudo que eu quero é ligar um valor a uma etiqueta!

Copiei o texto acima da documentação ( http://docs.angularjs.org/guide/directive ) para fazer um ponto: que este documento é como a documentação antiga do UNIX: realmente útil para quem já conhece o sistema, mas não é tão útil para iniciantes que estão tentando desenvolver experiência real. Com todos os tutoriais que mostram como fazer tarefas simples no AngularJS (ótimo para aplicativos de brinquedo, mas não tão bons para os tipos de aplicativos do lado do cliente que eu quero construir), por que não há nenhum para o material mais avançado?

Ok, hora de eu ser mais construtivo.

Alguém pode, por favor, fornecer alguns exemplos simples e interessantes de como fazer as várias ligações que esta documentação está tentando descrever? Exemplos que mostram a syntax apropriada para essas declarações e descrições do escopo (em inglês claro) de como elas retornam ao atributo que está sendo adicionado à tag customizada ???

Obrigado pela sua paciência e agradecemos antecipadamente por qualquer ajuda.

Você está bem perto ..

 app.directive('mytag',function() { return { restrict: 'E', template: '
' + '' + '' + '

{{controlval}}

' + '
', 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) { } }; });
{{parenttype}}
app.controller('ParentCtrl', function($scope){ $scope.parenttype = 'FOO'; $scope.parentFn = function() { $scope.parenttype += '!!!!'; } });

A mágica está principalmente no scope: declaração na sua definição de diretiva. tendo qualquer scope: {} lá “isolará” o escopo do pai, o que significa que ele obtém seu próprio escopo … sem isso, ele usaria o escopo do pai. O restante da mágica está nas propriedades do scope: { 'internalScopeProperty' : '=externalAttributeName' } : scope: { 'internalScopeProperty' : '=externalAttributeName' } … onde the = representa um cenário de binding bidirecional. Se você alterar isso = para um @ você verá apenas permite que você passe uma string como um atributo para a diretiva. O & é para executar funções do contexto do escopo pai.

Espero que isso ajude.


EDIT: aqui é um trabalho PLNKR

Eu me esforcei um pouco com essa documentação também quando comecei a me tornar angular, mas vou tentar esclarecer as coisas para você. Primeiro, ao usar essa propriedade de scope , ela cria um “escopo isolado”. Tudo isso significa que ele não herdará propriedades de escopos pai e, portanto, você não precisa se preocupar com colisões no escopo.

Agora, a notação ‘@’ significa que o valor avaliado no atributo será vinculado automaticamente ao escopo da diretiva. Portanto, terminaria com o escopo tendo uma propriedade chamada foo que contém a string “bar”. Você também pode fazer algo como E então o valor avaliado de {{bar}} será vinculado ao escopo. Como os atributos são sempre strings, você sempre terminará com uma string para essa propriedade no escopo ao usar essa notação.

A notação '=' basicamente fornece um mecanismo para passar um object para sua diretiva. Ele sempre extrai isso do escopo pai da diretiva, portanto, esse atributo nunca terá o {{}} . Então, se você tiver ele irá vincular o que estiver em $scope.bar na sua diretiva na propriedade foo do escopo de sua diretiva. Qualquer alteração que você fizer para foo dentro do seu escopo será refelecionada em bar no escopo pai e vice-versa.

Eu não usei a notação '&' quase tanto quanto a outra também, então eu não a conheço tão bem quanto essas duas. Pelo que entendi, ele permite que você avalie expressões do contexto do escopo pai. Portanto, se você tiver algo como , sempre que você chamar scope.foo () dentro de sua diretiva, ele chamará a function doStuff no escopo pai da diretiva. Tenho certeza que há muito mais que você pode fazer com isso, mas eu não estou tão familiarizado com tudo isso. Talvez alguém possa explicar isso com mais detalhes.

Se apenas o símbolo estiver definido no escopo, ele usará o mesmo nome que o atributo para vincular ao escopo de diretivas. Por exemplo:

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

Ao include a diretiva, precisaria haver os atributos foo1, foo2 e foo3. Se você deseja que uma propriedade em seu escopo seja diferente do nome do atributo, você pode especificar isso após o símbolo. Então, o exemplo acima seria

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

Ao include a diretiva, seria necessário que os atributos bar1, bar2 e bar3 fossem vinculados ao escopo nas propriedades foo1, foo2 e foo3, respectivamente.

Eu espero que isso ajude. Sinta-se à vontade para fazer perguntas com as quais eu possa esclarecer minha resposta.