如何允许 ng-model 在 angularjs 中输入 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

确保你的 postcurrent 变量在范围内定义

$scope.postcurrent={linkaudio:""};

Answer 2

这是 Strict Contextual Escaping (SCE) 的结果。 Angular 将拒绝 load/render 未被 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 列入白名单，因为它们可以加载到您的应用程序中。

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

How to allow ng-model input html in angularjs

javascript

mean

angularjs

meanjs