8

No AngularJS, eu estava criando uma diretiva.

Percebi que, ao usar o sinal = para capturar determinada valor do escopo do controller, quando eu alterava esse valor, o valor do controller pai também estava sendo alterado.

Por exemplo:

angular.module('app', [])

.controller('Parent', function ($scope) {

    $scope.users = [{name: "Jonh"}, {name: "Wallace"}];

    $scope.user = $scope.nomes[0];
})

.directive('userMoreInfo', function () {

    var directive = {
        replace: true,
        restrict: 'E',
        template: '<button ng-click="showInfo(user)">info</button>',
        scope: {
            os: '='
        }
    }; 

    directive.controller = function ($scope) {

        $scope.showInfo = function (user, modal) {

            $http.get('/mais-informacoes/' + user.id).then(function (response) {

                // isso aqui tá alterando o valor do controller pai

                $scope.user = response.data; 

                // restante do código (não relevante à pergunta)
            })
        };
    };
})

Chamada:

 <div ng-controller="Parent">
      <ul>
          <li ng-repeat="user in users">
             {{ user.name }}
             <user-more-info></user-more-info>
          </li>
      </ul>
 </div>

Porém eu não queria que isso acontecesse. Queria usar a propriedade de scope com o mesmo nome, sem afetar o controller pai.

Acabei usando o < e funcionou como eu queria.

Superficialmente, entendi que = um valor de maneira que os "dois lados" são afetados. E < atribui o valor de maneira que fica isolado no scope da diretiva.

Sendo assim, gostaria de saber, detalhadamente, quais são as principais diferenças entre esses dois operadores, referente a forma de atribuição do scope de uma determinada diretiva.

1

1 Resposta 1

5
+25

Você está fazendo uma pequena confusão com o scope isolado da diretiva. Vou esclarecer melhor:

Por padrão, ao criar uma diretiva, ela possui scope: false dessa forma, ela não cria um escopo, ela utiliza exatamente o mesmo escopo do pai de onde é inserida. Caso você defina ela com scope: true você diz a diretiva pra criar um escopo isolado de onde foi criada, herdando o escopo do pai e podendo assim ser reaproveitada em diversos lugares.

Caso você deseje manipular o modelo dentro da diretiva, existe 3 opções pra definir no atributo scope sendo elas:

  • '=' two-way data-binding;
  • '<' one-way data-binding;
  • '@' top-down binding;
  • '&' executar um método no escopo do pai;

A maior confusão geralmente é entre a utilização do '=' e '@' por serem bem parecidos. A diferença é que utilizando o '@' você pode passar uma expressão e com o '=' você passa diretamente seu model. Também pode definir um nome diferente caso no interior da diretiva você trate o model com outro nome, por exemplo: infoDateView: '=info'.

Sugiro pra resolver seu problema simplesmente definir scope: true, dessa maneira você herdará o model user que está utilizando, sem alterar o valor no escopo pai.

Fonte:

Espero ter ajudado. Abraço.

3
  • 1
    afirmação sobre o < está errada. O angular 1.5 implementou recentemente a opção <. Documentação 12/09/2016 às 14:01
  • Alterado a resposta a respeito disso. Obrigado. 19/09/2016 às 14:27
  • Obrigado. Que pena você ter corrigido depois do período da recompensa. Mas possivelmente darei recompensa nessa pergunta novamente :D 19/09/2016 às 14:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .