如何使用Angular動態更改小書簽參數？

Question

我有一個有角度的單頁應用程序。 我正在嘗試創建一個書簽，但是要根據我是在產品開發環境還是本地開發環境中，使該書簽引用一個不同的JS文件。 這大致是原始的書簽：

<a href="javascript:(function(){var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://mydomain.com/scripts/bookmarklet.js');
document.body.appendChild(jsCode);})();">My Bookmarklet</a>

這工作得很好，並且將加載bookmarklet.js。 但是在Angular中，我在控制器中設置了一個范圍變量，它是prod域或本地主機的根，例如：

$scope.rootUrl = prod ? 'http://mydomain.com/' : 'localhost:3000/';

然后在有角的頁面上我正在做：

<a href="javascript:(function(){var jsCode = document.createElement('script');
jsCode.setAttribute('src', '{{rootUrl}}/scripts/bookmarklet.js');
document.body.appendChild(jsCode);})();">My Bookmarklet</a>

出於某種原因，當將角度變量添加到書簽時，chrome在呈現和使書簽無用時會像這樣添加' unsafe： '：

<a href="unsafe:javascript:(function(){var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://mydomain.com/scripts/bookmarklet.js');
document.body.appendChild(jsCode);})();">My Bookmarklet</a>

我四處搜尋，似乎無法找到解決方案或無法理解為什么會這樣。 任何解決此問題的幫助將不勝感激！

Answer 1

安全性，組織性和可測試性是該角度框架的三個核心目標。 因此，默認情況下，它不允許您將javascript設置為<a>標記的<a>通常被認為是草率和不安全的，容易被利用，並且很難測試。

該框架提供ng-click指令以執行Java響應click事件，從而在所有情況下都替換了<a href="javascript:whatever">的需求，並且為了增強安全性，默認情況下，角度編譯器僅提供在href中允許mailto: ， ftp: ， http:和https: ：。

這意味着，如果需要不安全的javascript href並將其拖到書簽工具欄，則必須在config塊中配置angular編譯器，如下所示：

angular.module('moduleName').config(['$compileProvider', function($compileProvider) {   
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|javascript):/);
}]);

（ 注意 ：較舊版本的angular（<1.2）使用$ compileProvider.urlSanitizationWhitelist）