Question

我想修改网页＆＃39;使用angularjs和greasemonkey的行为。我想知道，最好的方法是什么？我应该使用jquery注入像＆＃34; ng- * ＆＃34;等属性。在我可以写一些角度代码之前到DOM元素？或者我可以坚持使用angularjs吗？

感谢。

Answer 1

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

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

总而言之，当您从JavaScript代码将ng-*属性放入DOM时，它们不会自动被连接起来;但AngularJS提供了$compile函数，用于通过JavaScript中的AngularJS属性连接新的HTML内容。

那么对于Greasemonkey / Userscript来说，这是什么意思？

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

出于这些目的：

从AngularJS＆＃39;中获取对$compile的引用动态喷射系统
获取您希望HTML代码连接到
将带有ng-*属性的HTML代码放入字符串中，并在其上和范围内调用$compile。
获取结果并使用通常的jQuery风格将其放入页面。

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

$(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);

       });
   });

});

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

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

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

表格

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

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

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

1 个答案: