AngularJS $scope not populating view

Question

I have a view like so:

<div ng-controller= "test" ng-init = "doit()">
    <span>{{testval}}</span>
</div>

The view's controller looks like this:

function test($scope){
    var counter = 0;
    $scope.doit = function(){
       console.log('switched to view');
       $scope.testval = counter++; 
    };
};

The first time I switch to the view controlled by 'test', it shows '0'. After that, it shows nothing, but the console.log continues firing. How can I set this up to execute 'doit' each time I switch to the view and successfully update the view by modifying $scope?

Thanks

Mark Rajcok · Accepted Answer · 2013-01-22 17:21:53Z

5

Remove the ng-init() and put the call to doit() into your controller:

function test($scope){
    var counter = 0;
    $scope.doit = function(){
       console.log('switched to view');
       $scope.testval = counter++; 
    };
    $scope.doit();
};

Each time you switch to this view, the controller code will execute. If you want the counter to persist between view changes, you'll have to put it into a service or $rootScope (because the controller, well its $scope, is destroyed when you move to another view).

answered Jan 22, 2013 at 17:21

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

2 Comments

Andrew Rhyne Over a year ago

I thought the controller was instantiated as an object? I want to be able to call "doit" dynamically and on-the-fly from within the view.

Mark Rajcok Over a year ago

@Andrew, when ng-controller is encountered in the HTML (or when ng-view is used and a route specifies which controller to create for that route, and you switch to that route) Angular creates a new scope and then "applies (in the sense of JavaScript's Function#apply) the controller constructor function" to the new scope object. So is there also a controller object? It is not clear to me if there is or not.

Andrew Rhyne · Accepted Answer · 2013-01-22 17:28:30Z

0

Had to add $scope.digest() to the end of doit. The example listed is a boiled down example of the logic I was encountering on a much smaller scale. In reality, it was a function called getPhysOrd that executed an asynchronous templated websocket bridge to query data off the server. It had to be able to do this on-the-fly. Calling digest forced the watchers to update the view according to the model changes. Thanks

answered Jan 22, 2013 at 17:28

Andrew Rhyne

5,0705 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

AngularJS $scope not populating view

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related