AngularJS给我视频url未定义

我试图从JSON中读取视频名称，并在<video>标记的来源中打印它。但是，当我加载页面时，视频仍然是空白的，在控制台它说http://www.url.com/gallery/video/undefined，但如果我做"检查"，它打印正确的url…为什么?
这是HTML代码:

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="mediaReproductionApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Principale</title>
    <script src="js/angular.js"></script>
    <script src="js/angular_read_media.js"></script>
</head>
<body ng-controller="MediaReproductionCtrl">
    <div class="media_player">
        <video preload="metadata" ng-hide="reproductionCodeIsEmpty(item.items[0].media) == true" controls>
            <source src="{{playVideo(item.items[0].media)}}" type="video/webm" />
        </video>
    </div>
</body>
</html>

脚本如下:

var model = {};
var mediaReproductionApp = angular.module("mediaReproductionApp",[]);
mediaReproductionApp.run(function ($http) {
    $http.get("movimenti_per_totem.json").success(function (data) {
        model.items = data;
    });
});
mediaReproductionApp.controller("MediaReproductionCtrl", function($scope) {
    $scope.item = model;
    $scope.playVideo = function(media) {
     return "../gallery/video/" + media;
     }
     $scope.reproductionCodeIsEmpty = function(media) {
     return media == "";
     }
});

您的函数$scope.playVideo()将在数据到达之前被调用，因此media最初将是undefined。

使用ng-src，并确保在定义media之前不返回字符串。因此，最好不要在视图中使用函数，而应在视图中定义作用域模型属性

$scope.playVideo = function(media) {
     return media ? "../gallery/video/" + media : null;
}
<source ng-src="{{playVideo(item.items[0].media)}}" type="video/webm" />

当插入值为false时，

ng-src不会在元素上设置src

请尝试一下。我调用run方法的方式可能是错误的。但是我试图在这里解释在HTTP调用期间何时分配作用域变量。

 mediaReproductionApp.run("**xyzw**",function ($http) {
        $http.get("movimenti_per_totem.json").success(function (data) {
            return data;
        });
    });
    mediaReproductionApp.controller("MediaReproductionCtrl",function($scope,xyzw) {

    **xyzw**.success(function(dataresult)){
        $scope.item = dataresult;
    }

        $scope.playVideo = function(media) {
         return "../gallery/video/" + media;
         }
         $scope.reproductionCodeIsEmpty = function(media) {
         return media == "";
         }
    });

相关内容

最新更新

热门标签：