Wait for Angularjs to process variables

Question

I am currently using Angularjs and it's routeProvider to send partials or a view into my main page.

app.config(function ($routeProvider) {
    $routeProvider
        .when('/ball/:ball_id', {
            templateUrl: '/ball.html',
            controller: 'ballController'
        });
})
.controller('ballController', function($scope, $rootScope) {
    $scope.ball_id = $routeParams.ball_id;
});

ball.html (partial)

<div id="ball" ball_id="{{ball_id}}"></div>

<script>
// Want to wait for {{ball_id}} to be rendered.....
$(document).ready(function() {

    // Read ball id and pass to function

    console.log($('#ball').attr('ball_id')); // WANT #, but logs {{ball_id}} <<----
    doSomethingBasedOnBallId($('#ball').attr('ball_id'));

});


function doSomethingBasedOnBallId(ballId) {
    // calculate & make some other requests specific to only this page....

    $('#ball').append(add-some-html);
}
</script>

Now before we go too crazy with separating models/views/etc... this is just one special case where the partial needs to know the 'ball_id' in order to perform additional actions.

So two questions:

Is there a way you can use {{ball_id}} in an actual javascript function in the ball.html page? ex: doSomethingBasedOnBallId({{ball_id}}); Or do I need to do it the way I am doing it where I need to look it up in the DOM?
My main problem is how in ball.html do I wait for {{ball_id}} to be rendered by angular? Under the document.ready(), the console just logs {{ball_id}}, although if I go through Chrome's js console and do $('#ball').attr('ball_id'), that works because at that point, angular has replaced the {{ball_id}} already.

Approach is all wrong, you should be using data models in the scope to do whatever it is you want, not using the DOM at all. Strongly suggest reading [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, May 30 '15 at 16:48
calling function in `document.ready ` will get call before angular renders content on html, you need to `setTimeout()` & then inside that call you function — Pankaj Parkar, May 30 '15 at 16:51

score 1 · Accepted Answer · answered May 30 '15 at 17:56

Others have covered it already but here's simple sample for you to "digest".
Try to get over the jQuery mindset :)

app.config(function($routeProvider) {
  $routeProvider
    .when('/ball/:ball_id', {
        templateUrl: 'ball.html',
        controller: 'ballController'
    })
    .otherwise({
      redirectTo: '/404'
    });
})
.controller('ballController', function($scope, $routeParams) {
  $scope.ball_id = $routeParams.ball_id;

  function doSomethingBasedOnBallId(ball_id) {
    console.log('did something with ball # ' + ball_id);
  }

  doSomethingBasedOnBallId($scope.ball_id);
});

.

<!-- main.html -->
<div>
  <a href="#/ball/1">ball 1</a>
  <a href="#/ball/2">ball 2</a>
  <hr>
</div>
<ng-view></ng-view>

<!-- ball.html -->
<div>Got ball #{{ ball_id }}</div>

score 0 · Answer 2 · answered May 30 '15 at 16:49

What exactly are you trying to do with the ball id? If you know it at page load time, then just write the js function immediately with the ball id in it. If you need this js to execute each time a new ball is selected, then you're better off handling it in an angular controller or service.

Yes it is possible to drop extra js on the page as part of a view each time, but you're going to end up doing a lot of work to make it possible, probably more work than just putting the function call in a controller.

Wait for Angularjs to process variables

2 Answers2