지시문 템플릿 및 신뢰할 수있는 리소스가있는 AngularJS 다이제스트 사이클 제한

Question

지시문이 템플릿을 대체하는 것처럼 보이고 소스를 업데이트하는 트러스트 리소스 함수를 실행하면 템플릿을 다시 업데이트하고 루프에 걸리게됩니다. 그러나 이것은 권장되는 방법입니까 ?? html로 :

<player videos='[{"type":"mp4","src":"http://vjs.zencdn.net/v/oceans.mp4","poster":"http://www.videojs.com/img/poster.jpg","captions":"http://www.videojs.com/vtt/captions.vtt"},{"type":"webm","src":"http://vjs.zencdn.net/v/oceans.webm"}]' /> 

그리고 이것은 자바 스크립트입니다 : 당신이 문자열 사이에 양방향 바인딩을 사용하는

http://jsfiddle.net/kmturley/mgosw7kx/4/

Answer 1

: 여기

module.directive('player', ['$sce', function ($sce) { 
    'use strict'; 
    return { 
     restrict: 'E', 
     scope: { 
      videos: '=' 
     }, 
     link: function (scope, element, attrs) { 
      scope.trustSrc = function(src) { 
       return $sce.trustAsResourceUrl(src); 
      } 
     }, 
     template: '<video preload="none" poster="{{ trustSrc(videos[0].poster) }}">' + 
      '<source ng-repeat="item in videos" ng-src="{{ trustSrc(item.src) }}" type="video/{{ item.type }}" />' + 
      '<track kind="captions" ng-src="{{ trustSrc(videos[0].captions) }}" srclang="en" label="English" />' + 
      '</video>' 
    }; 
}]); 

그리고는 작업 바이올린입니다 귀하의 동영상 속성과 범위를 통해 $ 스코어 변수 : { videos: '=' } 이것은 사용 방법이 아닙니다. 문서 당으로서

:

= 또는 = ATTR - 로컬 스코프 속성과 ATTR 속성 값 통해 정의 된 이름의 상위 범위 속성 간의 양방향 바인딩 설정. attr 명이 지정되어 있지 않은 경우, 속성 의 이름은 로컬 명과 같게 간주됩니다.

다음 중 하나를 수행 할 수 있습니다

scope: {}, 
link: function(scope, element, attr) { 
    scope.videos = attr['videos']; 
} 

또는 부모 범위의 컨텍스트에서 실행하는 함수를 반환합니다 사용 '&'

& 또는 & ATTR가 - 제공하는 부모 범위 인 의 컨텍스트에서 표현식을 실행하는 방법. attr 명이 지정되어 있지 않은 경우, 속성 명 는 로컬 명과 동일하다고 보여집니다. 이 경우

당신은해야 할 것 :

scope: {videos: '&'}, 
link: function(scope, element, attr) { 
    scope.videos = scope.videos(); 
} 

고립 범위에 대한 더 자세한 정보를 원하시면 : Wawy의 답변을 사용하여 버전 작업 $compile