Question

我正在尝试创建一个Chrome扩展程序，用于修改特定网站的内容。由于我无法访问网站的src代码，我必须通过javascript更改它

我希望新内容是动态的并通过角度更新（原始网站不使用角度）。

我正在使用ng-app和ng-controller注入标记，并在js中创建一个角度应用和控制器。

然而，页面不理解角度html指令并逐字呈现。

我做错了什么？

来自教程代码：我正在将此注入html（使用js代码，在页面加载时由chrome扩展注入）：

<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']);
});

Angular，jQuery和Chrome扩展

2 个答案: