ng-bind-html не отображает компонент формы, такой как текстовое поле, кнопка

Question

$scope.data="<h2>here we have text boxes and button</h2><button type='button' class='btn btn-primary'>inside Basic</button>"+"<button type='button' class='btn btn-primary'>inside Primary</button>"+" Name inside<input type='text' name='namein' /><br>Age indise :: <input type='text' name='agein' /><br></form>"; 

<div ng-bind-html="data"></div> 

Это содержимое, которое я использовал в ng-bind-html, но оно не отображает текстовое поле и кнопку. Я пробовал такие же код в плункере, но он там не работал.

Answer 1

Вам нужно добавить $sce.trustAsHtml, потому что кнопка (как и многие другие элементы) не является надежным элементом Угловое может связываться без этого:

JSFiddle

angular.module('myApp', []) 
.controller('dummy', ['$scope', '$sce', function ($scope, $sce) { 
    $scope.data = $sce.trustAsHtml('<button type="button" class="btn btn-primary">a new button!</button>'); 
}]); 

Если вам необходимо использовать угловую функцию внутри нг-связывать-HTML, так что вам нужна директива как это (credits):

.directive('compileTemplate', function($compile, $parse){ 
    return { 
     link: function(scope, element, attr){ 
      var parsed = $parse(attr.ngBindHtml); 
      function getStringValue() { return (parsed(scope) || '').toString(); } 

      //Recompile if the template changes 
      scope.$watch(getStringValue, function() { 
       $compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves 
      }); 
     }   
    } 
}); 

HTML:

<div ng-bind-html="data" compile-template></div> 

С помощью $compile вы можете скомпилировать строку, которая будет использоваться как HTML, написанная непосредственно в представлении.