AngularJS Scope not applying to html page

Question

I have two separate controllers on one page. One of them broadcasts an event and the other listens for it. When the one that listens receives the event, it changes it's scope variable and then prints the page. For some reason, I see the scope applying but I don't see it apply to the page.

$scope.$on('valuesUpdated', function(){
    $scope.Name = dataGrabber.Name;
    $scope.Address = dataGrabber.Address;       
    window.print();
});

There is not enough data to detect the issue. Please post all relevant code or better try to reproduce this behavior in Fiddle/Plunker. — Maxim Shoustin
– Maxim Shoustin, Commented Nov 6, 2014 at 21:41

bengro · Accepted Answer · 2014-11-06 21:38:11Z

1

Given the information you provided, I think it's the known scope hiding issue.

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. More about it here...

The solution will be to use objects notation:

$scope.data.Name

Or the Controller As notation for controllers.

answered Nov 6, 2014 at 21:38

bengro

1,02411 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Scope not applying to html page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related