What is the difference between "=" and "" in the scope options of a custom policy?

8

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.

    
asked by anonymous 02.09.2016 / 16:33

1 answer

5

You're making a little mess with the scope isolated from the policy. I'll clarify further:

By default, when you create a policy, it has scope: false so it does not create a scope, it uses exactly the same scope as the parent from which it is inserted. If you define it with scope: true you tell the directive to create an isolated scope from where it was created, inheriting the scope of the parent and can be reused in several places.

If you want to manipulate the model within the directive, there are 3 options to define in the scope attribute:

  • '=' two-way data-binding;
  • '<' one-way data-binding;
  • '@' top-down binding;
  • '&' execute method in parent scope;

The biggest confusion is usually between using '=' and '@' because they are very similar. The difference is that using '@' you can pass an expression and with '=' you pass your model directly. You can also define a different name if within the directive you treat the model with another name, for example: infoDateView: '=info' .

I suggest to solve your problem by simply setting scope: true , this way you will inherit the user model you are using, without changing the value in the parent scope.

Source:

I hope I have helped. Thanks.

    
09.09.2016 / 15:38