What is the difference between "=" and "<" in the "Scope" options of a customised directive?

Question

In Angularjs, I was creating a directive.

I realized that by using the sign = to capture a certain controller scope value, when I changed this value, the parent controller value was also being changed.

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)
            })
        };
    };
})

Calling for:

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

But I didn’t want this to happen. I wanted to use the Scope property with the same name, without affecting the parent controller.

I ended up using the < and worked as I wanted.

Superficially, I understood that = a value so that the "two sides" are affected. And < assigns the value so that it is isolated in the scope of the directive.

Therefore, I would like to know in detail what are the main differences between these two operators regarding the way in which the scope of a particular Directive.

Answer 1

You’re making a little mess with the scope isolated from the directive. I will clarify further:

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

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

• '=' two-way data-Binding;
• '<' one-way data-Binding;
• '@' top-down Binding;
• '&' perform a method in the parent’s scope;

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

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

Source:

• https://github.com/angular/angular.js/wiki/Understanding-Scopes

I hope I helped. Hug.