Question

我正在尝试在AngularJS项目中使用视频播放器（jwplayer）。这篇文章由2部分组成：第1部分是背景，第2部分是我的问题。感谢。

第1部分：解决“加载播放器错误：找不到可播放的来源”问题。

首先，视频没有显示，只是页面上的黑色矩形ui，以及一个非常误导的控制台消息“没有找到合适的玩家并启用了后备”。

几小时后，我碰巧将jwplayer尺寸配置从“height：450，width：800”更改为“height：'100％'，width：'100％'”。这次jwplayer在页面上显示一条消息：“加载播放器时出错：找不到可播放的来源”。

这给了我指导。我的jwplayer用法如下：

<!-- 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}}",
......

将该文件行更改为硬编码的绝对视频网址将起作用，表明这是真正的问题。所以我最终得到了：

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

然后问题解决了，现在。（但在我看来，这仍然是丑陋的，不直观的。）

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

第2部分：我真正的问题

来自传统模板引擎的世界，人们可能倾向于在任何他想要的地方使用{{...}}。但在AngularJS中，情况有所不同。

除了上面的例子，这是我之前的另一个例子：

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

一般来说，何时何何不在AngularJS视图文件中使用{{...}}？

Answer 1

仅适用于第1部分：如果您正在使用jwplayer和Angular，那么我强烈建议您从Angular调用jwplayer而不是反过来（您正在做什么）。

e.g。

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

只要加载了jwplayer.js（在index.html中链接或使用类似require.js的东西），你就可以了！

Answer 2

将Jw Player作为指令包裹起来。您可以使用以下内容：https://github.com/ds62987/angular-jwplayer

Answer 3

试着就这个话题提出自己的想法。

规则＃1：永远不要在AngularJS的{{...}}标签内写<script>...</script>。仅仅因为AngularJS的模板系统无法正常工作。相反，使用这个：

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

或者，您可以在视图文件中定义一个额外的帮助器：

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

然后通过控制器文件以“通常”的方式使用您的模型：

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

就是这样。

然而，我仍然不确定何时何时不在视图的html部分内使用{{...}}。留下这部分由其他人回答。（我现在只是第2周新的AngularJS学习者。）

Answer 4

编辑：我添加了test plunker：http://plnkr.co/edit/BMGN4A

你能提供一个完整的例子吗？因为我写的如下，但收到消息Cannot read property 'videoUrl' of undefined，虽然我的控制器中有$scope.videodata.videoUrl = "bla bla";。

<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>

什么时候不在AngularJS视图文件中使用{{...}}？

4 个答案: