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

【问题标题】：How to allow ng-model input html in angularjs如何在angularjs中允许ng-model输入html
【发布时间】：2016-03-08 21:13:02
【问题描述】：

我有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:

我怎样才能允许输入网址并提交表单而不会出错？谢谢。

【问题讨论】：

您是否正确定义了控制器范围内的对象？
请提供小提琴，

标签： javascript angularjs mean meanjs

【解决方案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([...]) 仅将一些网址列入白名单，作为可以加载到您的应用中的网址。

【讨论】：

嗯，这是个好主意，我会应用它，非常感谢，stackoverfow 是一个很棒的社区。span>

【解决方案2】：

确保你的 postcurrent 变量是在作用域上定义的

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

【讨论】：

谢谢大家。我刚刚找到它，我已经完全禁用了SCE，所以它没有显示错误。这是帮助我的代码： angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) { // 完全禁用 SCE。仅用于演示目的！ // 不要在新项目中使用。$sceProvider.enabled (假);});
有人对这个问题有新的想法吗？请给我建议。我真的很感激