Doesn't work html filter in Angular

Question

angular.module("Angular", []) .controller("AngularCtrl", function ($scope) { $scope.setPhone = function(phone, user_phone) { return phone ? "<input type='text' id='phone' value='" + user_phone + "'>" : user_phone; }; }) .filter('html', function($sce) { return function(val) { return $sce.trustAsHtml(val); }; });

Above, in fact, the code; below - html:

 <div class="col-sm-3"> {{setPhone(phone, '<?= $user['phone'] ?>') | html}} </div> <div class="col-sm-1"> <div class="checkbox"> <input type="checkbox" ng-model="phone"> </div> </div>

I can not understand why the filter does not work (as the method also does not work, if you make an alternative, with the same function).

html}} (the number is, however, normal, slightly different), and when you click the checkbox, it changes to <input type = 'text' id = 'phone' value = '- 1902'>
But the html filter does not work, I can not display html not in the form of a tag.

Accepted Answer · 2016-09-27T08:53:37

If you want the string to be output as html, you need to use the ng-bind-html directive. Through curly brackets, the string will not be rendered.

 angular.module("MyApp", []) .controller("AngularCtrl", function($scope, $sce) { $scope.setPhone = function(phone, user_phone) { return $sce.trustAsHtml(phone ? "<input type='text' id='phone' value='" + user_phone + "'>" : user_phone); }; $scope.phone = true; })

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="MyApp"> <div ng-controller="AngularCtrl"> <div class="col-sm-3" ng-bind-html="setPhone(phone,'+7-(999)-999-99-99')"> </div> <div class="col-sm-1"> <div class="checkbox"> <input type="checkbox" ng-model="phone"> </div> </div> </div> </div>

Doesn't work html filter in Angular

1 answer 1

More articles: