AngularJS Partial Views Not Using Javascript Libraries
I have a problem that I can't solve the problem at all. I cannot get my third party Javascript files to work in my views (although it works well when not using ng-view. 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 with different Javascript files too.
I tried loading Javascript files directly into partial.html but no difference.
I am using angularjs v1.3.8 version.
thank
source to share
Due to how most third party scripts work, and how angular modifies the DOM, you need to use directives to wrap third party components that manipulate the DOM (usually a quick googling will find a directive for any popular JS libraries). If a third party library is related to data manipulation like moment.js or lodash, you can just include them in your index.html and use them in your angular JS code, but in most cases someone wrote or you can write a wrapper on this code and also as an angular provider (service / factory are all providers).
In short, the material in your particles is not in the document at the "right" time when JS from third party materials is run. With a directive in place, you can tell when angular loads / compiles some template and compiles your directive so that it will execute that third party code on the element the directive is applied to.
source to share