Question

我正在尝试从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 == "";
     }

});

Answer 1

您的函数$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" />

当内插值为假时，

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

Answer 2

请试试这个。我称之为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 == "";
         }

    });

AngularJS给我视频网址未定义

2 个答案: