Run script after view is loaded AngularJS

Question

Im new at AngularJS, and i have this problem;

I fill part of my view with html from a variable in my controller:

<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

Everything goes fine until i decide to run a script. The script is shown, but it doesn't run. I think the problem is the view is filled with my variable controllers after loading the page, so the script doesn't run. The reason that i am using a variable in my controller to storage the script is because i will have to get the script from somewhere else, and its frequently changed.

Is this a viable way to run my script?.

Here is an example of my code:

View:

    <div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

Controller:

    .controller('browseCtrl', function($scope,$sce) {

      $scope.video = '<div id="idxx1" style="width: 460px; height: 290px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"></div><script>addeere3ejs("idxx1",  "172653", "24431581", "1_fq2w6oc2");</script>';

      $scope.deliberatelyTrustDangerousSnippet = function() {
      return $sce.trustAsHtml($scope.video);
    };
})

If my question it is unclear i would try to explain it better.

Christopher Marshall · Accepted Answer · 2014-06-04 19:48:32Z

3

You can use the viewContentLoaded event in your controller.

$scope.$on('$viewContentLoaded', function(){
 // Run after view loaded.
});

Not exactly sure if ng-bind-html will allow a script to be ran like that. You may need to wrap it in angulars brackets to auto-run on load.

 <div ng-bind-html="{{deliberatelyTrustDangerousSnippet()}}"></div>

edited Jun 4, 2014 at 19:48

answered Jun 4, 2014 at 19:32

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

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

4 Comments

Christopher Marshall Over a year ago

This may be tied to ui-router, I'm unsure.

Ishan Chatterjee Over a year ago

It's not, it should be available in a vanilla AngularJS application. However, I still don't think this answers the question.

Christopher Marshall Over a year ago

Edited my answer, giving both examples.

Nicolas Del Valle Over a year ago

I resolved the problem adding the function addeere3ejs(foo, foo, etc) in my controller. So i could manipulate it's execution more easily. Thanks @ChristopherMarshall for helping.

Abi Bellamkonda · Accepted Answer · 2015-04-17 08:57:45Z

0

My work around was to run a $scope function like this with a known variable(s) that will change:

{{postBind(results)}}

Then have a method in your controller to do this

$scope.postBind = function (obj) {
        running_my_extenal_methods();
    }

edited Apr 17, 2015 at 8:57

answered Apr 17, 2015 at 8:43

Abi Bellamkonda

1362 silver badges6 bronze badges

Collectives™ on Stack Overflow

Run script after view is loaded AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related