AngularJs中標籤使用正確的路徑卻無法加載視頻（angular動態綁定動態src）

今天的開發任務中有一個需求是將視頻顯示在列表中，視頻地址存在數據庫的一個字段中，每個用戶可以存多個視頻，每個視頻的地址用，隔開。看上去是一個很容易實現的功能，後臺取出該字段然後通過分割，獲取到每個地址然後傳回前端。前端使用的是基於Angular的框架，所以通過ng-repeat進行循環展示即可。可就是這個看似簡單的問題卻有一個不大不小的坑。

<div class="form-group" ng-show="review.videoUrl!=''" ng-repeat="url in urls">
    <label class="col-sm-1 control-label">視頻認證:</label>
    <div class="col-sm-10">
        <td >
            <video id="vedio" ng-src="url"  ng-show="url!=null"
              controls="controls" style="width:600px;height:   300px;">
           		   您的瀏覽器不支持 video 標籤。
		    </video>
        </td>
	</div>
</div>

上圖是正常操作，理想效果是循環展示出所有的視頻，然而現實是要麼報錯，要麼無法獲取路徑…

那麼問題出在哪裏呢，通過翻閱資料得知：在angularJs中爲了避免安全漏洞，一些ng-src或者ng-include都會進行安全校驗，因此常常會遇到ng-src正確地址卻無法使用。簡單來說就是我們用angular裏面的 ng-src 時會進行安全檢查  因爲我們是訪問資源服務器上面的視頻  所以他不給你這個url通過 所以我們就不放不了視頻。原因知道了，那接下來就該思考如何解決了，而方法就是使用$sce服務把一些地址變成安全的、授權的鏈接...簡單地說，就像告訴門衛，這個陌生人其實是我的好朋友，很值得信賴，不必攔截它！下面直接上代碼：

<div class="form-group" ng-show="review.videoUrl!=''" ng-repeat="url in urls">
    <label class="col-sm-1 control-label">視頻認證:</label>
    <div class="col-sm-10">
        <td >
            <video id="vedio" ng-src="{{url | trustUrl }}"  ng-show="url!=null"
              controls="controls" style="width:600px;height: 300px;">
              您的瀏覽器不支持 video 標籤。
            </video>
        </td>
    </div>
</div>

這上面是html標籤 ，然後是過濾器的代碼：

app.filter("trustUrl", ['$sce', function ($sce) {
    return function (recordingUrl) {
    return $sce.trustAsResourceUrl(recordingUrl);
    };
}]);

這樣angularJS 在使用html5 的 video src就可以了 。

在解決過程中還存在一個小疑問，上代碼：

//獲取視頻地址
$http({
        method: "get",
        url:$constens.API.URL_BUSBASE_APPROVAL_DETAIL_URL + '?id=' + $stateParams.id_self,
     }).success(function (data, status, headers, config) {
             var urls=data;
             console.log(urls);
             $scope.urls = urls;
         });

後臺分割了地址後存入數組回調存到了data中，此時如果直接將data存入 $scope.urls中瀏覽器會顯示data的數據爲空對象，只有在var了一個對象並將data值存入其中，然後將對象值賦給$scope.urls纔可使用，由於本人對前端知識沒有太多瞭解所以想求助大佬爲何會出現這種情況，有知道的望告知，感謝。