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

Take a look to http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html :) — Mistalis, Oct 19 '16 at 12:02
ok i have used "ng-bind-html-unsafe" but i am not getting any output @Mistalis — RJV, Oct 19 '16 at 12:05

score 1 · Answer 1 · answered Oct 19 '16 at 12:08

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>

Hmm.. i worked when i use "ng-bind-html-unsafe" but i am not getting any output....;-( — RJV, Oct 19 '16 at 12:12

score 0 · Accepted Answer · edited Oct 19 '16 at 12:30

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>

html.indexOf is not a function with angularjs

2 Answers2