In AngularJS, I was creating a directive.
I noticed that when I used the =
sign to capture a certain value from the controller scope, when I changed this value, the value of the parent controller was also changing.
For example:
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)
})
};
};
})
Call:
<div ng-controller="Parent">
<ul>
<li ng-repeat="user in users">
{{ user.name }}
<user-more-info></user-more-info>
</li>
</ul>
</div>
But I did not want that to happen. I wanted to use the scope property with the same name, without affecting the parent controller.
I ended up using <
and it worked as I wanted.
On the surface, I understood that% with a% value so that "two sides" are affected. And =
assigns the value so that it gets isolated in <
of the directive.
So, I would like to know in detail what are the main differences between these two operators, regarding the form of assignment of scope
of a certain directive.