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.