When and when not to use {{...}} inside the AngularJS view file?

Question

When and when not to use {{...}} inside the AngularJS view file?

I am trying to use a video player (the jwplayer) inside my AngularJS project. This post consists with 2 parts: part 1 for background, part 2 is my question. Thanks.

PART 1: Solving the "Error loading player: No playable sources found" problem.

At first the video is not showed, just a black rectangle on the page ui, and a quite misleading console message saying "No suitable players found and fallback enabled".

Hours later I happened to change the jwplayer size configuration from "height:450, width:800" to "height:'100%', width:'100%'". This time jwplayer shows a message on the page ui: "Error loading player: No playable sources found".

That gives me direction. My jwplayer usage looks like this:

<!-- this is my index.html -->
<div id="jw_container">Loading the player ...</div>
<script>
    var player = jwplayer("jw_container").setup({
        file:"{{model.my_video.video_url}}",
......

Change that file line to a hardcoded absolute video url will work, indicating that is the real problem. So eventually I got:

file: angular.element(document.getElementById('ng-wrapper')).scope().model.my_video.video_url,

and then problem solved, for now. (But still ugly, not intuitive, in my opinion.)

================================ SEPARATOR ===================

PART 2: My real question

Coming from the world of traditional template engines, one might tend to use {{...}} wherever he wants. But in AngularJS, situation is different.

Besides the above example, this is another example bit me before:

<img title="{{my_title}}" src='logo.png'> <!-- This works -->
<img src="{{my_image}}"> <!-- This doesn't. Use ng-src instead. -->

So in general, when and when not to use {{...}} inside the AngularJS view file?

angularjs
jwplayer

Answer 1

Only for Part 1: If you're working with jwplayer and Angular then I highly recommend calling jwplayer from Angular as opposed to the other way round (what you're doing).

e.g.

myModule.controller('MyController', function ($scope, stuffINeed) {
    jwplayer.key = "myKey";
    jwplayer("myElement").setup({
                file: "MyFileName"
            });

As long as jwplayer.js has been loaded (link in index.html or use something like require.js) you're good to go!

Answer 2

Trying to give my own thoughts on this topic.

Rule #1: Never write {{...}} inside AngularJS's <script>...</script> tag. Simply because AngularJS's template system doesn't work in thay way. Instead, use this:

//This is the usage in the view
angular.element(document.getElementById('the_id')).scope().foo

Alternatively, you can define an extra helper in view file:

//This is another usage in the view
function bar(foo) {
    //do something with foo
}

and then use your model in a "usual" way via controller file:

//This is inside controller file
function YourCtrl($scope) {
    bar($scope.foo);
}

That is it.

Yet I am still not sure when and when not to use {{...}} inside the html part of view. Leave this part to be answered by someone else. (I am now just a new AngularJS learner in week 2.)

Answer 3

Edit : I added test plunker : http://plnkr.co/edit/BMGN4A

Can you provide a full example? Because I write as below but get message Cannot read property 'videoUrl' of undefined although I have $scope.videodata.videoUrl = "bla bla"; in my controller.

<script type="text/javascript">
    jwplayer("myElement").setup({
        file: angular.element(document.getElementById('myElement')).scope().videodata.videoUrl,
        image : "http://i3.ytimg.com/vi/2hLo6umnjcQ/mqdefault.jpg",
        autostart : "false",
        id : 'playerID',
        width: '700px',
        height: '400px',
        primary : "flash",
        stretching : "uniform",
        modes : [{
            type : 'html5'
        }, {
            type : 'download'
        }, {
            type : 'flash',
            src : 'player.swf'
        }]
    });
</script>

Answer 4

Wrap the Jw Player as a Directive. You can use something like this: https://github.com/ds62987/angular-jwplayer