нг-связывать-HTML не работает, как ожидалось

Question

a.html

<div ng-bind-html="htmlElement()"></div> 

controller.js

$scope.htmlElement = function(){ 
    var html = '<input type="text" ng-model="myModel" />'; 
    return $sce.trustAsHtml(html); 
} 

Но когда я хочу, чтобы получить значение ввода текста с помощью

alert($scope.myModel); 

В нем говорится, что myModel не определен. Это происходит только при динамическом добавлении текста.

Как я могу получить значение этого ввода текста?

Answer 1

Я предлагаю вам вместо этого использовать эту манипуляцию DOM.

В вашей controllers.js:

app.directive("myHtml", function(){ 
    return { 
     restrict: 'E', 
     template: '<input type="text" ng-model="myModel" />', 
     link: function(scope, attr){ 
      scope.myModel = 'Input text here'; 
     } 
    } 
}); 

app.controller('listCtrl', function($scope) { 

    $scope.showInputText = function(){ 
     alert($scope.myModel); 
    } 
}); 

В вашем HTML:

<div ng-controller="myCtrl"> 
    <my-html><my-html> 
    Your input: {{myModel}} 
    <button ng-click="showInputText()">Show Input Text</button> 
</div> 

Answer 2

попробовать это, http://plnkr.co/edit/A4HRCuTbJt21wEngH9HX?p=preview:

<div ng-bind-html="htmlElement()" compile-element></div> 

....

module.directive("compileElement", function($compile){ 
     return { 
     link: function(scope,element) { 
      scope.$watch(function(){ 
      return element.html(); 
      }, function() { 
      $compile(element.contents())(scope); 
      }); 
     } 
     }; 
    }); 

Answer 3

попробовать добавить следующий CSS к вашему элементу DIV/

white-space: pre-wrap; 
word-wrap: break-word;