Chrome 확장 프로그램을 작성하는 AngularJS 구성 요소

Question

Chrome 확장 프로그램을 구축 중이며 놀랍게도 확장 측에 AngularJS 앱을 만들고 콘텐츠 스크립트 측에 AngularJS 앱을 만들 수있었습니다. 후자는 페이지에 삽입 된 모달 같은 요소로 작업하는 데 유용합니다. 나는이 콘텐츠 스크립트로이 응용 프로그램을 주입 :

var myApp = angular.module('ContentApp', []); 
/** 
* Append the app to the page. 
*/ 
$.get(chrome.runtime.getURL('templates/modal.html'), function(data) { 
    $($.parseHTML(data)).appendTo('body'); 

    // Manually bootstrapping AngularJS app because template was also manually imported. 
    angular.element(document).ready(function() { 
    angular.bootstrap(document, ['ContentApp']); 
    }); 
}); 

문제는 modal.html 큰지고 난 여전히 더 많은 요소를 추가해야한다는 지금 온다. Angular로 구성 요소를 만들면 다음과 같이 만들 수 있다고 생각했습니다.

angular.module('ContentApp'). 
    component('greetUser', { 
    template: 'Hello, {{$ctrl.user}}!', 
    controller: function GreetUserController() { 
     this.user = 'world'; 
    } 
    }); 

실제로 작동합니다. 렌더링 된 페이지에서 Hello, world 메시지를 볼 수 있습니다. 내가 templateUrl에 대한 template을 변경하는 경우, 그것은 실패 :

// This doesn't work 
templateUrl: 'templates/component.html', 

// Neither does this 
templateUrl: 'templates/component.html', 

// Although this is similar to the way I got the main template, it didn't worked either 
templateUrl: chrome.runtime.getURL('templates/component.html'), 

가치는 내가 manifest.json에 권한을 추가 한 언급 :

:

"web_accessible_resources": [ 
    "templates/*" 
    ], 

내가 콘솔에있어 오류 것은 이것이다

Error: [$sce:insecurl] http://errors.angularjs.org/1.5.11/$sce/insecurl?p0=chrome-extension%3A%2F%2Fext_id%2Ftemplates%2Fmodal.html 
    at chrome-extension://ext_id/scripts/lib/angular.min.js:6:426 
    at getTrusted (chrome-extension://ext_id/scripts/lib/angular.min.js:154:156) 

누구나 작동 방식을 알고 있습니까? 아니면 Chrome 확장 프로그램을 너무 많이 요청하고 있습니까?

Answer 1

나는 대답을 this link에 발견했다. 올바른 방향으로 절 지적 faboolous 덕분에, templateURL 이후)

는 $scope 실행하기 전에 처리하는 크롬 확장 프로그램에서 템플릿 경로를 확보하는 적절한 방법이 있습니다 :

// This works. Yay! 
    angular.module('ContentApp'). 
     component('greetUser', { 
     templateUrl: ['$sce', function ($sce) { 
      return $sce.trustAsResourceUrl(chrome.runtime.getURL('templates/component.html')); 
     }], 
     controller: function ($scope) { 
    ...