AngularJs attributes vs scope in directives

Question

What is the difference while using variables though attributes vs scope while define directives? For example -

angular.module('tModule')
  .directive('tModule', function() {

    return {
      restrict: 'E',
      scope: true,
      templateUrl: function(element, attributes) {
        return  attributes.variable1;
      }
    }
});

versus if I use scope. like below -

angular.module('tModule')
  .directive('tModule', function() {

    return {
      restrict: 'E',
      scope: {
        variable1: "=variable1",
        variable2: "=variable2"
      },
      templateUrl: function() {
        return variable1;
      }
   }
 });

What are the differences and advantages?

use '=' when you need two way data binding. It is used when you want two way data binding between controller and directive. — dhavalcengg
– dhavalcengg, Commented Aug 21, 2015 at 13:09

sma · Accepted Answer · 2015-08-21 13:12:47Z

4

There are a few differences based on your example:

In your top example, specifying scope: true means to create a new instance of the parent scope. In the bottom example, using an object syntax means to create an isolated scope. So, when you pass parameters to a directive using the scope syntax like that, you are inherently creating an isolated scope for the directive.
If you want to take advantage of two-way data binding (=) or method invocation (&), then you'd want to use the second method of passing through scope instead of attributes.

answered Aug 21, 2015 at 13:12

sma

9,5978 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs attributes vs scope in directives

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related