Angular，jQuery和Chrome擴展

Question

我正在嘗試創建一個Chrome擴展程序，以修改特定網站的內容。 由於我無權訪問網站的src代碼，因此必須通過javascript進行更改

我希望新內容是動態的，並且可以通過角度進行更新（原始網站不使用角度）。

我正在使用ng-app和ng-controller注入標簽，並在js中創建一個角度應用和控制器。

但是，該頁面無法理解html角度指令，無法逐字呈現。

我究竟做錯了什么？

從教程代碼中：我正在將其注入到html中（使用頁面擴展時由chrome擴展名注入的js代碼）：

<div ng-app="phonecatApp" ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</div>

並將其發送給js（通過擴展注入，在頁面加載時）：

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

在頁面加載后運行

Answer 1

這可能是一個愚蠢的問題，但是您是否還在注入角度代碼之前在頁面中注入了angular.js庫？

Answer 2

我沒有自舉。 顯然ng指令是在DOMContentLoaded上編譯的，發生在我注入任何東西之前。 所以我需要自己初始化角度

angular.element(document).ready(function() {
    angular.bootstrap(document, ['phonecatApp']);
});