Scope in directives

Roger Uhlin

I have problem with Directives and Scopes and arrays. What I have read is that if I write a directive where the scope is set to true I get a new scope separated from parent scope. Here you see my two directives in my example. One for each of my arrays.

   kdApp.directive('kdinsurancesituationamount', function kdinsurancesituationamount() {
   return {
          restrict: 'E',
          scope: true,
          template: "<span>Name  </span> " +
              "<input value='{{name1}}' ng-model='name1'>" +
              "<div ng-repeat='isa in insuranceSituationAmountList1'>" +
              "<span>Amount {{$index}} </span> " +
              "<input value='{{isa}}' ng-model='isa'>" +
              " <br /></div>"

      };
  });
kdApp.directive('kdinsurancesituationamount2', function kdinsurancesituationamount2() {
      return {
          restrict: 'E',
          scope: true,
          template: "<span>Name  </span> " +
              "<input type='text' maxlength='9' value='{{name2}}' ng-model='name2'>" +
              "<div ng-repeat='isa in insuranceSituationAmountList2'>" +
              "<span>Index {{$index}} </span> " +
              "<input type='text' maxlength='9' value='{{isa.amount}}' ng-model='isa.amount'>" +
              " <br /></div>"

      };
  });

It works fine when I have variabels like $scope.name1 = "John" but when I have arrays I don't understand how it works. See my controller here. I have two different examples, insuranceSituationAmountList1 and insuranceSituationAmountList2. And they work different. With ng-repeat I write out the array in input tags, every input tag has also a ng-model attribute.

    kdApp.controller('InsuranceSituationAmountController', function ($scope) {
      $scope.insuranceSituationAmountList1 = ["1000", "2000", "3000"];
      $scope.insuranceSituationAmountList2 = [{
          amount: "4000"
      }, {
          amount: "5000"
      }, {
          amount: "6000"
      }];
      $scope.name1 = "John";
      $scope.name2 = "John";
  });

The array insuranceSituationAmountList1 will never update the parent scope even if I put the scope to false in the directive. But for the field name1 it works as I want. When scope is false field name1 update parent scope and when scope is set to true it doesn't.

The array insuranceSituationAmountList2 will always update the parent scope even if I put the scope to true in the directive. But for the field name2 it works as I want. . When scope is false field name2 update parent scope and when scope is set to true it doesn't.

I have a jsfiddle where you can see how it works http://jsfiddle.net/uhlrog/Lzcqeruw/66/ So if you have time test it, first with scope: true and change to scope:false and change content in the input boxes.

I suppose that it is something fundamental that I don't understand but can someone explain for me why my arrays doesn't work well.

(As you can read my first languange is not english ;-))

David Beech

Ok..

First you need to understand this basic principle:

When 'getting' a scope value angular will navigate up the hierarchy until it finds it. However when 'setting' property it will just place it on the current scope. (this is based on how javascript inheritance works and not a fault of angular, so don't blame them.)

So.. 'getting' {{ name }} for example will navigate up until it finds a $scope with name and display it. but 'setting' {{ name = 'Changed' }} will not set the value on that scope.. it will set it on the first available scope..

However.. 'getting' {{ object.name }} will navigate up the scopes until it finds an object called object then display it's name property and 'setting' {{ object.name = 'Changed' }} will first need to 'get' "object" (by navigating up the hierarchy of scopes) then set it's property. Which will be updated on whichever $scope "object" is on.

Now if you understand this it may help explain whats going on and this is why the ng-repeat is updating the right values in the 2nd version of the directive.

Now on the first directive I can see why it is confusing that the reverse is happening when you set scope to false.. this is because now ng-model="name1" is on the same scope as it's parent and updates directly (no $scope hierarchy) however also bear in mind that ng-repeat does create a scope!. so because the array values are not contained in objects the are updating only on the individual ng-repeat scopes.

use this css to see scopes:

.ng-scope {
    border: 1px red solid;
}

I understand that I might not of explained this well (especially if English isn't your first language, as you mentioned) but hopefully an updated fiddle will help..

Highlighting the problem and Fixing the problem

It helps to remember that if you use ng-model without a '.' (dot) then that value will ONLY be updated on it's closest scope.

UPDATED: This article helps highlight this issue with diagrams if you didn't understand from my attempt

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Scope in directives

From Dev

Scope inheritance for angular directives

From Dev

controllerAs with directives and isolated scope

From Dev

Scope Isolation & nested directives

From Dev

AngularJS : directives and scope

From Dev

Isolated scope for directives

From Dev

angular scope in controllers + directives

From Dev

AngularJs scope reference with directives

From Dev

bind $scope in Directives/Controller

From Dev

Scope inheritance for angular directives

From Dev

bind $scope in Directives/Controller

From Dev

Angular Directives: scope vs bindToController

From Dev

Multiple custom directives scope in Angular

From Dev

Directives with Isolated scope versions conflict

From Dev

angularjs inheriting scope in nested directives

From Dev

Isolate scope in Angularjs custom directives - "="

From Dev

AngularJs attributes vs scope in directives

From Dev

AngularJS : Nested Directives and Scope Inheritance

From Dev

Accessing scope params of children directives

From Dev

AngularJs attributes vs scope in directives

From Dev

AngularJS directives - Isolated Scope and Inherited Scope

From Dev

Nested Angular directives triggering scope functions on parents

From Dev

Multiple directives [ngController, ...] asking for new/isolated scope

From Dev

Scope issue with ui-router and directives

From Dev

angularjs - isolate scope between multiple different directives

From Dev

Why are my AngularJS directives sharing scope?

From Dev

AngularJS Directives - Can Isolated Scope Attributes be required?

From Dev

Angular How to access controller scope from directives

From Dev

Angular:How to pass scope data to directives

Related Related

HotTag

Archive