2

I have html code:

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

But when I enter to input, and press button submit form, I have error:

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

How do I can allow enter url and submit form without error? Thank you.

Igor Raush
  • 15,080
  • 1
  • 34
  • 55
phan ngoc
  • 191
  • 3
  • 14

2 Answers2

3

This is a result of Strict Contextual Escaping (SCE). Angular will refuse to load/render a string value which has not been explicitly trusted as a resource URL by the SCE policy. This is done as a security measure, in order to maintain control what resources can be loaded into your app.

You can write a directive which extends a sibling NgModelController to trust all input as a resource 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);
        });
      }
    }
  }]);

which can then be used as 

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

Here is a working Plunker. You can test by pasting an audio URL into the input.

Another option is to use $sceDelegateProvider.resourceUrlWhitelist([...]) to whitelist only some URLs as those which can be loaded into your app.

Igor Raush
  • 15,080
  • 1
  • 34
  • 55
0

Make sure your postcurrent variable is defined on the scope

$scope.postcurrent={linkaudio:""};
Kole Myers
  • 61
  • 1
  • 6
  • Thank you everybody.I have just found it, I have disabled SCE completely, so it didn't show error. This is code help me: angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) { // Completely disable SCE. For demonstration purposes only! // Do not use in new projects. $sceProvider.enabled(false); }); – phan ngoc Dec 04 '15 at 02:39
  • Anybody have new idea for this problem ? Please suggest me. I really appreciate it – phan ngoc Dec 04 '15 at 02:42