何时以及何时不使用 AngularJS 视图文件中的 {{...}}？答案

【问题标题】：When and when not to use {{...}} inside the AngularJS view file?何时以及何时不使用 AngularJS 视图文件中的 {{...}}？
【发布时间】：2015-06-17 14:47:31
【问题描述】：

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

第 1 部分：解决“加载播放器时出错：未找到可播放源”问题。

一开始视频没有显示，只是页面 ui 上的一个黑色矩形，以及一个相当误导性的控制台消息，上面写着“找不到合适的播放器并启用后备”。

几小时后，我碰巧将 jwplayer 的尺寸配置从“height:450, width:800”更改为“height:'100%', width:'100%'”。这次 jwplayer 在页面 ui 上显示一条消息：“Error loading player: No playable sources found”。

这给了我方向。我的 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}}",
......

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

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

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

================================== 分隔符============== =====

第 2 部分：我真正的问题

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

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

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

所以一般来说，什么时候什么时候不要在 AngularJS 视图文件中使用 {{...}}？

【问题讨论】：

标签： angularjs jwplayer

【解决方案1】：

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

例如

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

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

【讨论】：

【解决方案2】：

将 Jw 播放器包装为指令。你可以使用这样的东西：https://github.com/ds62987/angular-jwplayer

【讨论】：

为什么这被否决了？是因为答案范围不够吗？

【解决方案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 学习者。）

【讨论】：

【解决方案4】：

编辑：我添加了测试插件：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>

【讨论】：