I'm developing an Ionic v1 application which uses AngularJS 1xx. I can read all my content (including img paths) from a JSON file, but I keep getting $SCE errors when trying to perform ng-repeat over local video reference paths. I understand this occurring with remote video but I don't know why it has this issue with local video. (I'm still even getting errors with the $SCE fix I applied from this SO link Angular JS Handling Ng-Repeated HTML5 Video & $SCE). I will just paste a sample of my code below:
THE APP.JS FILE: (other controllers used are emitted for this demo)
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;
});
}]);
THE (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."
}
]
}
FINALLY, THE HTML THE TRIES TO CALL THE VIDEO REF IN A LOOP:
<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>
Unfortunately, I am still getting this error, even though I have 'supposedly' whitelisted my own domain:
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.
Do I have to whitelist my http://localhost:8100/ or something? If so, how does that work once the app is compiled to run on iOS/Android and run on mobile device?
