html.indexOf is not a function with angularjs

Question

I am getting error when i use ngSanitize.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
  var myApp = angular.module('myApp', ['ngSanitize']);
  myApp.run(function($templateCache) {
    $templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
  });
  myApp.controller("crt", ['$scope', '$templateCache', '$compile',
    function($scope, $templateCache, $compile) {
      //$templateCache.remove("templateCache.html");
      $scope.caches = $compile($templateCache.get("templateCache.html"))($scope);
    }
  ])
</script>

<body ng-app="myApp" ng-controller="crt">
  <span ng-bind-html="caches"></span>
</body>

Help me out what wrong in this code

ok i have used "ng-bind-html-unsafe" but i am not getting any output @Mistalis — RJV
– RJV, Commented Oct 19, 2016 at 12:05

Mistalis · Accepted Answer · 2016-10-19 12:08:21Z

1

Does this works with your files?

I removed ngSanitize dependency, injected $sce in your controller and used ng-bind-html-unsafe in HTML.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
  var myApp = angular.module('myApp', []);
  myApp.run(function($templateCache) {
    $templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
  });
  myApp.controller("crt", ['$scope', '$templateCache', '$compile', '$sce', function($scope, $templateCache, $compile, $sce) {
      //$templateCache.remove("templateCache.html");
      $scope.caches = $compile($templateCache.get("templateCache.html"))($scope);
    }
  ])
</script>

<body ng-app="myApp" ng-controller="crt">
  <span ng-bind-html-unsafe="caches"></span>
</body>

answered Oct 19, 2016 at 12:08

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RJV Over a year ago

Hmm.. i worked when i use "ng-bind-html-unsafe" but i am not getting any output....;-(

RJV · Accepted Answer · 2016-10-19 12:30:20Z

ng-bind-html on bind safe html like

<b>,<p>,<h1> etc

But not like input,button tags

in that case you can use angular.element()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
  var myApp = angular.module('myApp', []);
  myApp.run(function($templateCache) {
    $templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
  });
   myApp.controller("crt", ['$scope', '$templateCache', '$compile','$rootElement', function ($scope, $templateCache, $compile, $rootElement) {
            var cache = $compile( $templateCache.get("templateCache.html"))($scope);
            angular.element($rootElement).find("span").append(cache);
        }])
</script>

<body ng-app="myApp" ng-controller="crt">
  <span ></span>
</body>

Collectives™ on Stack Overflow

html.indexOf is not a function with angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related