AngularJS partial views not using Javascript libraries

Question

I have a problem that I can't work out the problem at all. I can't get my 3rd party Javascript files to run in my views (though runs nicely when not using ng-view. An example below

Index.html

    <main class="page-content" ng-controller="ViewController">
        <div ng-view ng-cloak class="ng-cloak page-content-view"></div>
    </main>
    <script  src="http://vjs.zencdn.net/4.11/video.js"></script>
    <script src="/javascripts/app.js"></script>

partial.html

    <video ng-cloak 
           class="ng-cloak video-js vjs-default-skin"
           controls preload="auto" width="auto" height="auto"
           data-setup='{"example_option":true}'>
       <source src='{{video.src}}' type='video/mp4' />
    </video>

Routing works fine. I have other examples as well with different Javascript files.

I have tried to load the Javascript files directly into partial.html, but no difference.

I am using angularjs version v1.3.8.

Thank you

Answer 1

Due to how most third party scripts work and how angular modifies the DOM you need to use directives to wrap the third party components that manipulate the DOM (typically a quick googling will find a directive for any popular JS libs). If the third-party lib is to do with data manipulation like moment.js or lodash you can typically just include those in your index.html and use them in your angular JS code, but in most cases someone has written or you can write a wrapper on that code as well in the form of an angular provider (service/factory all are providers).

The long story short is the stuff in your partials isn't in the document at the "right" time when the JS from the third party stuff is being run. By having a directive you can indicate when angular loads/compiles some template and compiles your directive that it should execute that third party code on the element the directive is applied to.