Question

我正在开发一个使用AngularJS 1xx的Ionic v1应用程序。我可以从JSON文件中读取所有内容（包括img路径），但在尝试通过本地视频参考路径执行ng-repeat时，我不断收到$ SCE错误。我理解这与远程视频有关，但我不知道为什么它与本地视频有这个问题。（我仍然在使用此SO链接Angular JS Handling Ng-Repeated HTML5 Video & $SCE中应用的$ SCE修复时遇到错误。我将在下面粘贴我的代码示例：

APP.JS文件：（为此演示发出了其他使用的控制器）

var tfdisplays = angular.module('starter', ['ionic', 'ui.router']);

tfdisplays.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow loading from our assets domain.  Notice the difference between * and **.
        'lace-monitor/lace-monitor-feeding']);
})

//This controller pulls back info on reptiles for display and information page
tfdisplays.controller('ReptilesController', ['$scope', '$http', '$state',
    function($scope, $http, $state) {
        $http.get('js/reptileData.json').success(function(data) {
            $scope.reptiles = data.reptiles;
            $scope.whichReptile = $state.params.repId;
        });
}]);

（SAMPLE）REPTILES JSON DATA FILE：

{
  "reptiles": [
    {
      "name": "Lace Monitor",
      "classname": "lace-monitor",
      "scientific_name": "Varanus varius",
      "featured_image": [
        "lace-monitor/lace-monitor1","lace-monitor/lace-monitor2","lace-monitor/lace-monitor3","lace-monitor/lace-monitor4","lace-monitor/lace-monitor5"
      ],
      "video": "lace-monitor/lace-monitor-feeding",
      "description": "<p>The Lace Monitor (Varanus varius) is found along the east coast of Australia in forests and coastal woodlands.  Typically they grow to a length of 1.5 - 2m and although their colouration varies, they are mostly a very dark grey highlighted with yellow to cream spots and stripes.</p><p>These large lizards spend a large amount of time in the trees but must return to the ground to forage for food.  Lace Monitors are very good at smelling carrion (dead animals) which they will readily feed upon particularly near roads where road kills are plentiful.</p><p>Lace Monitors can become very comfortable in urban environments where they will scavenge rubbish bins for food and even take food from picnic tables or directly from the hands of people.</p>",
      "adaptions": [
        "After a large feed they are able to go for many weeks without feeding again.","Lay between 6 to 12 eggs each year usually in termite mounds, particularly those found in trees","FThe toes are equipped with very long claws that are well adapted for climbing","Monitors have a forked tongue just like snakes used for tasting scents in the air"
      ],
      "relationships": "<li><strong>What I eat:</strong> birds, insects, bird eggs, reptiles and small mammals</li><li><strong>What eats me:</strong> Birds (Kookaburra, Butcher Birds), large lizards like water dragons and other Lace monitors, domestic cats, large snakes (Juveniles only).</li>",
      "facts": "Once the female lays the eggs in a termite nest, she then leaves the termites to reseal the eggs inside the nest. The mother is aware of when the eggs are due to hatch and she will return to the nest and open it up to allow the juveniles to escape."
    }
  ]
}

最后，HTML要在循环中呼叫视频REF：

<div class="video" ng-repeat="movie in reptiles">
    <video controls playsinline>
        <source ng-src="img/reptiles/{{movie.video}}.mp4" type="video/mp4">
        Your iPad does not support HTML5 video playback.
    </video>
</div>

不幸的是，我仍然收到此错误，即使我已经“假设”将我自己的域名列入白名单：

Error: [$interpolate:noconcat] Error while interpolating: img/reptiles/{{movie.video}}.mp4
Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.

我是否必须将http://localhost:8100/或其他内容列入白名单？如果是这样，一旦将应用程序编译为在iOS / Android上运行并在移动设备上运行，它是如何工作的？

为什么在AngularJS中使用本地视频时会出现$ SCE错误？

0 个答案: