angularjs - 如何使用angularjs和greasemonkey来修改网页？

Question

我想使用angularjs 和greasemonkey 修改网页的行为。我想知道，最好的方法是什么？在编写一些 Angular 代码之前，我应该使用 jquery 将“ng-*”等属性注入(inject) DOM 元素吗？或者我可以只坚持使用angularjs吗？

谢谢。

Answer 1

这里有一个关于从 JavaScript 代码动态修改 DOM 中的 AngularJS 内容的一般答案:

AngularJS + JQuery : How to get dynamic content working in angularjs

总而言之，当你把 ng-*从 JavaScript 代码到 DOM 中的属性，它们不会自动连接；但是 AngularJS 提供了 $compile用于将新的 HTML 内容与来自 JavaScript 的 AngularJS 属性 Hook 的函数。

那么这对于 Greasemonkey/Userscript 意味着什么？

为此，我假设您的 Greasemonkey 脚本正在修改已经使用 AngularJS 的现有页面，并且您要添加的 AngularJS 内容使用了该页面上已有的 AngularJS 范围内的一些变量或函数。

出于这些目的:

引用 $compile来自 AngularJS 的动态注入(inject)系统

获取您希望 HTML 代码连接到的 AngularJS 范围的引用

将您的 HTML 代码放入 ng-*字符串中的属性并调用 $compile关于它和范围。

获取结果并使用通常的 jQuery 样式方式将其放入页面中。

为了说明，这里有一个 CERN's Particle Clicker game 的小脚本。 ，它在“ worker ”部分下添加了一个统计信息。

$(function () { // Once the page is done loading...

   // Using jQuery, get the parts of the page we want to add the AngularJS content to
   var mediaList = $('ul.media-list');      
   var medias = $('li.media', mediaList);

   // A string with a fragment of HTML with AngularJS attributes that we want to add.
   // w is an existing object in the AngularJS scope of the
   // <li class="media"> tags that has properties rate and cost.
   var content = '<p>dps/MJTN = <span ng-bind="w.rate / w.cost * 1000000 | number:2"></span></p>';

   // Invoke a function through the injector so it gets access to $compile **
   angular.element(document).injector().invoke(function($compile) {

       angular.forEach(medias, function(media) {

           // Get the AngularJS scope we want our fragment to see
           var scope = angular.element(media).scope();

           // Pass our fragment content to $compile,
           // and call the function that $compile returns with the scope.
           var compiledContent = $compile(content)(scope);

           // Put the output of the compilation in to the page using jQuery
           $('p', media).after(compiledContent);

       });
   });

});

** 注意:像任何使用依赖注入(inject)的 AngularJS 函数一样， .invoke使用您传递给它的函数的参数名称
确定要注入(inject)的内容，如果您使用更改参数名称的缩小器，这将中断。

为避免这种情况，您可以更换

.invoke(function($compile) { ... });

用表格

.invoke(['$compile', function($compile) { ... }]);

如果缩小器将参数名称更改为 $compile 以外的名称，则不会中断.