2015-09-20 3 views
0

Я попытался связать одностраничное html окно модели с помощью углового HTTP-вызова и тэга ng-bind-html, также содержал ядро ​​js ядра ngSanitize. но он работает без элемента HTML.
Мой код: HTMLКак преобразовать значение строки в элемент html с помощью углового?

<div class="myModels" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-backdrop="true" ng-show="showModel"> 
    <div class="modal-dialog" role="document" ng-bind-html = "ModelContent"></div> 
</div> 

Контроллер

$scope.Login = function(path){ 
    $http.post('http:'+path).success(function(result){$scope.ModelContent = result;}) 
} 

Рендер HTML:

<div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-model=""> 
       <span aria-hidden="true">&times;</span> 
       <span class="sr-only">Close</span> 
      </button> 
      <h4 class="modal-title" id="myModalLabel">Login</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="col-md-10"> 
        <label>User Name</label> 
        <input type="text" name="username" maxlength="10" class="form-control" ng-model=""> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-10"> 
        <label>Password</label> 
        <input type="password" name="password" maxlength="15" class="form-control" ng-model=""> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button name="SignIn" class="btn btn-success pull-right">Log in</button> 
     </div> 
    </div> 

Вы можете ссылаться ниже изображение не показывает HTML элементы enter image description here

+0

Не могли бы вы разместить код? –

ответ

1

Из беглого взгляда на источник the $sanitize whitelist, это выглядит как input по умолчанию недопустимы элементы.

Вы можете добавить их в белый список, но в этом случае HTML идет с вашего сервера, и я ожидаю, что он будет заслуживающим доверия. Таким образом, самым простым решением будет use $sce.trustAsHtml, чтобы разрешить все элементы в вашем HTML.

Чтобы сделать это, вы должны изменить Login функцию следующим образом:

// Note that you'll need to inject $sce into your controller 
$scope.Login = function(path){ 
    $http.post('http:'+path) 
    .success(function(result) { 
     $scope.ModelContent = $sce.trustAsHtml(result); 
    }); 
} 
0

поместить этот код в контроллере controller.js

$rootScope.errorMessage = 'Account activated successfully, please <a href="/">Login</a> and other <em>stuff</em> with your username and password'; 

также использовать этот код в HTML-страницу

<h5 ng-bind-html="errorMessage"></h5> 
+0

Я уже пробовал шаблон ng-bind-html и ng-bind. Он не работает –

+0

Можете ли вы изменить $ scope.ModelContent на $ rootScope.ModelContent –

+0

это небольшой пример связывания html http://plnkr.co/edit/mziacJZj2rFwo5c4fRtO?p=preview –