ng-bind-html no funciona como se esperaba

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);
}

Pero cuando quiero obtener el valor de la entrada de texto usando

alert($scope.myModel);

Dice que myModel no está definido. Solo sucede cuando agrego el ingreso de texto dinámicamente.

¿Cómo puedo obtener el valor de esa entrada de texto?

javascript angularjs web angularjs-directive angular-ui

0

Robin Sun 2 sep. 2014 a las 09:51

Answer 1

Le sugiero que use esta manipulación DOM con la directiva en su lugar.

En tu 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);
    }
});

En tu HTML:

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

3

khemry 2 sep. 2014 a las 06:43

Answer 2

Intente esto, 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);
          }); 
        }
      };
    });

0

Noypi Gilas 2 sep. 2014 a las 12:49

Answer 3

Intente agregar el siguiente CSS a su elemento / div

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

0

dam1 30 dic. 2014 a las 09:43

ng-bind-html no funciona como se esperaba

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript