CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Sebastien C.
Sebastien C.

Reputation: 2109

AngularJS: Directive scope conflicting with controllers scope

I'm working on a project with AngularJS where I have an issue with 2 scopes conflicting: - I have controllers defining scopes in different places of my DOM (it works great) - I just added 3 directives to implement a "help" tooltip function just as chardin.js plugin in jQuery (http://heelhook.github.io/chardin.js/) : one main directive to be able to trigger them all at once, one 'child' directive on the trigger button, and one 'child' directive used to mark each DOM element on which I want the tooltip.

When I have only those 3 directives, it works great, but when I implement my controllers and my directives at the same time, I cannot use my controllers anymore (the scope seems to be completly wrong...)

The structure I have is something like this :

and I added 1 directive on the body (the main one), 1 directive to a button somewhere, and 1 directive on various elements of the 4 sections...

I'm aware my explanations are confused, but I really did my best for my first message here!

If you want to see at the code I have written for my directives, here it is:http://plnkr.co/edit/GrwgkH?p=preview

Thanks a lot for your help

S.

Upvotes: 1

Views: 1743

Answers (2)

Aaron Hickman
Aaron Hickman

Reputation: 846

I ended up having issues with Primitive values as well. I ended up using sugar.js and Object.extended() to create a $scope.context object that I stored my model data on. This allowed for easy caching of the data as well.

Upvotes: 1

Patryk Ziemkowski
Patryk Ziemkowski

Reputation: 1510

Try wrapping your controller's scope models in some object. Primitive values (e.g., number, string, boolean) are hidden in child scopes by its own property with the same name.

Read more in Understanding Scopes on AngularJS github wiki.

Upvotes: 1

Related Questions