Angular、jQuery 和 Chrome 扩展答案

【问题标题】：Angular, jQuery and Chrome extensionAngular、jQuery 和 Chrome 扩展
【发布时间】：2015-08-08 00:04:20
【问题描述】：

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

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

我正在注入带有ng-app 和ng-controller 的标签，并在js 中创建一个角度应用程序和控制器。

但是页面不理解 angular 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.'}
  ];
});

页面加载后运行

【问题讨论】：

标签： javascript jquery angularjs google-chrome

【解决方案1】：

这可能是一个愚蠢的问题，但是在注入 Angular 代码之前，您是否也在页面中注入了 angular.js 库？

【讨论】：

【解决方案2】：

我没有引导。显然，ng 指令是在DOMContentLoaded 上编译的，这发生在我注入任何东西之前。所以我需要自己初始化 angular

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

【讨论】：