javascript - 如何在angularjs中允许ng-model输入html

Question

我有html代码:

<div class="inner-content-linkaudio">
  <label for="linkaudio">Link audio</label>
  <input type="url" name="linkaudio" ng-model="linkaudio" class="form-control">
</div>

但是当我进入输入并按下按钮提交表单时，出现错误:

Error: [$interpolate:interr] Can't interpolate: {{postcurrent.linkaudio}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: 

我如何才能允许输入 url 并提交表单而不会出错？谢谢。

Answer 1

这是 Strict Contextual Escaping (SCE) 的结果. Angular 将拒绝加载/呈现未被 SCE 策略明确信任为资源 URL 的字符串值。这是作为一项安全措施完成的，目的是保持对可以将哪些资源加载到您的应用程序的控制。

你可以写一个扩展兄弟NgModelController的指令信任所有输入作为资源 URL

angular.module('test', [])
  .directive('trustedUrl', ['$sce', function($sce) {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(value) {
          return $sce.trustAsResourceUrl(value);
        });
      }
    }
  }]);

然后可以用作

<input type="url" ng-model="url" trusted-url />
<audio ng-src="{{ url }}" controls></audio>

Here是一个工作的 Plunker。您可以通过将音频 URL 粘贴到输入中来进行测试。

---

另一种选择是使用 $sceDelegateProvider.resourceUrlWhitelist([...])仅将某些 URL 列入白名单，作为可以加载到您的应用中的 URL。