ng-if has isolated scope ?

[Thomas Fétiveau]

It seems that the ng-if directive has its own isolated scope. Is that intended ? 

[Thomas Fétiveau]

yes it has, exactly like ng-repeat has...

I understand that ng-repeat should have an isolated scope. But I do not understand why ng-if should...

If any one can explain, I'd be really happy...

[ganaraj p r]

ng-repeat does not have isolate scope. It has child scope. I think even ng-if has child scope. 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Regards,
Ganaraj P R

[Thomas Fétiveau]

True, thanks for your answer.

In my case, I have a directive that I've declared on the same node as ng-if and I'm trying to two-way databind somevalue between parent and child scope:

<li class=\"mydirective\" ng-if=\"somevalue\" somevalue=\"somevalue\"></li>

And my directive has folowwing code:

.directive('mydirective', function()

{

return {

restrict: 'C',

template: '<div class=\"is-dir-true \"><form ng-submit=\"doSomething(blabla)\"><input type=\"text\" ng-model=\"someothervalue\" /></form></div>',

scope: {

somevalue: '=somevalue'

},

link: function($scope, $element)

{

var i = $element.find('input');

i.bind('focusout', function(e) { $scope.somevalue= false; } );

i.focus();

}

};

})

but if I change the value of $scope.somevalue within my directive scope, it won't get updated in parent scope. Whereas it should as it's the all point of the "somevalue: '=somevalue'" directive scope declaration, no ? What's wrong here ?

[Witold Szczerba]

Your problem seems to be related to how inheritance in JavaScript works.
'x' has 'a' property.
'y' inherits from 'x'.
x.a = 5;
y.a now is equal to 5.
y.a = 8;
y does not inherit 'a' from 'x' any more.
x.a is still equal to 5.
y.a is equal to 8.

Try this:
x.a = {value: 5};
y.a.value = 8;
What's the x.a.value now?
Ha!

Regards,
Witold Szczerba
---
Sent from my mobile phone.

[Justinas Gulbinas]

As I remember every directive in AngularJS has it's own scope

j.

On 2013 Bir. 14, at 17:05, Thomas Fétiveau <thomas.fet...@gmail.com> wrote:

It seems that the ng-if directive has its own isolated scope. Is that intended ? 

[Pawel Kozlowski]

Hi!

On Sat, Jun 15, 2013 at 12:33 PM, Justinas Gulbinas
<just...@gulbinas.lt> wrote:
> As I remember every directive in AngularJS has it's own scope

This is not precise. There are many directives that don't create a new
scope: ng-class, ng-show and many others.

Cheers,
Pawel


--
AngularJS book:
http://www.packtpub.com/angularjs-web-application-development/book
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Thomas Fétiveau]

Thanks guys for adding your two cents to this thread.

I've made a little fiddle to illustrate my wondering: http://jsfiddle.net/zabojad/VY3r5/1/

What Witold has written is clearer to me now, is: when a scope is a child of another scope, it 'inherits' its properties. If those properties are objects, it actually inherits references to those objects so that the following happens :

  a.x = { 'value': true };

  // a extends b

  b.x.value = false;

  // now a.x.value is now false too

But as soon as inherited properties are primitives, they won't get updated in the parent scope:

  a.y = true;

  // a extends b

  b.y = false;

  // a.y is still true, sad :( !

That's fine. But reading the documentation on directives made me think that - even with primitives - , when we declare a private scope for a custom directive and we "bi-directionally bind" properties from parent scope to directive scope (using '='), it gets updated in the two ways... But apparently not, specifying a '=param' scope parameter is just equivalent to what would happen to this property if the directive scope were just a child of the parent scope.

• = or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <widget my-attr="parentModel"> and widget definition of scope: { localModel:'=myAttr' }, then widget scope property localModelwill reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel.

Few last questions and summarizing to ensure I've understood well directives scopes:

 - So to summarize, a directive can have 

       1: no proper scope at all (it uses the current one from the context where it has been declared). To do so, scope property must be set to false in directive definition (or not set at all)

       2: a new scope that is a child of the current scope (where the directive has been set). To do so, we must set scope property to true,

       3: an isolated scope (isolated from the parent scope) where we pick from the parent scope values to pass or bind. To do so we set the scope property to an object listing those properties.

 - What happens when two directives declaring a new/child scope are set on the same HTML element. Do they have their scopes merged ?

 - Same question with isolated scopes

Thank you guys for your participation in this thread.

Cheers,

Tom

[Witold Szczerba]

"Thomas Fétiveau" <thomas.fet...@gmail.com> wrote:

> What Witold has written is clearer to me now, is: when a scope is a child of another scope, it 'inherits' its properties. If those properties are objects, it actually inherits references to those objects so that the following happens :
>
>   a.x = { 'value': true };
>   // a extends b
>   b.x.value = false;
>   // now a.x.value is now false too
>
> But as soon as inherited properties are primitives, they won't get updated in the parent scope:
>
>   a.y = true;
>   // a extends b
>   b.y = false;
>   // a.y is still true, sad :( !

It is not about primitives vs objects as properties. It is about overriding vs not overriding a property in child.

a.x = {value: true};
b.x = {value: false};
What's the a.x?

So you can inherit objects as properties and still override them.

[Thomas Fétiveau]

Got it! Thanks again Witold for this explanation!

Any thought on my directive scopes questions ?

Rgds,

Tom