Like multiple DataContexts in WPF, does angularjs support this approach?

Question

Sometimes it happens in WPF(MVVM) that a UI controls (View/ Xaml ) have Two DataContexts,That's why we use the ElementName property when doing the Binding Expression so we select the Binded property from the wanted DataContext.

My qustion is : Do we have this kind of situation with Angularjs? I mean two scopes or datacontexts/ng-models(Whatever) for the same UI element (Html tag).

How can a WPF control have two data contexts? I have been working with WPF nearly 10 years and I have never seen such a thing. — Glen Thomas, Apr 05 '16 at 13:50
There are a lot of scenario that rides to this situation. http://stackoverflow.com/questions/15498890/multiple-datacontext-for-one-control-mvvm. This is one of them. — Med.Amine.Touil, Apr 05 '16 at 13:53
That is not one control having multiple data contexts, that is accessing a data context from another control. — Glen Thomas, Apr 05 '16 at 13:55
Sorry @GlenThomas . I mean UI controls (in the same XAML,View). — Med.Amine.Touil, Apr 05 '16 at 13:59

score 0 · Answer 1 · answered Apr 05 '16 at 14:02

0

The $scope variable is the equivalent of a .NET DataContext which is used to establish the root of any data binding expression which used in the corresponding HTML markup:

function UserController($scope) {
   $scope.currentUser = {
      firstName: "John",
      lastName: "Doe"
   };
}

function DocumentController($scope) {
   $scope.document = {
      title: "My Document",
      pageCount: 123
   };
}

To associate a certain controller with an HTML fragment, you have to add the ng-controller attribute to it to reference the desired controller.

<div ng-app ng-controller="UserController">
    First Name: <input type=text ng-model="currentUser.firstName"> <br>
    Last Name: <input type=text ng-model="currentUser.lastName"><br>
    Full Name: {{currentUser.firstName}} {{currentUser.lastName}}
</div>

<div ng-app ng-controller="DocumentController">
    Title: <input type=text ng-model="document.Title"> <br>
    Page Count: <input type=text ng-model="document.pageCount"><br>
</div>

answered Apr 05 '16 at 14:02

Glen Thomas

10,190
5
33
65

In this Example, firstName is not visible for the div where the ng-controller is the DocumentController. In WPF we can access to it using that Path ElementName...... What about angularjs ? – Med.Amine.Touil Apr 05 '16 at 14:08
My understanding is that you can only access properties on the controller, so maybe you could pass your user to the document controller in the JavaScript for the view to access it, but not access the other controller from the HTML – Glen Thomas Apr 05 '16 at 14:14
So here I guess we can that Xaml gives more options then angularjs directive? right ? – Med.Amine.Touil Apr 05 '16 at 14:16
1

See [this answer](http://stackoverflow.com/a/21454647/5152001) for details of one approach, but again requires some JS work – Glen Thomas Apr 05 '16 at 14:22

Like multiple DataContexts in WPF, does angularjs support this approach?

1 Answers1