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 — charlietfl
– charlietfl, Commented May 30, 2015 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
– Pankaj Parkar, Commented May 30, 2015 at 16:51

Mikko Viitala · Accepted Answer · 2015-05-30 17:56:02Z

1

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>

answered May 30, 2015 at 17:56

Mikko Viitala

8,4044 gold badges42 silver badges62 bronze badges

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

Comments

Nick Larsen · Accepted Answer · 2015-05-30 16:49:38Z

0

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.

answered May 30, 2015 at 16:49

Nick Larsen

18.9k6 gold badges70 silver badges97 bronze badges

Collectives™ on Stack Overflow

Wait for Angularjs to process variables

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related