javascript - span - property binding angularjs

AngularJS-ng-model falla en contenteditable<span>

Question

Estoy aprendiendo AngularJS. Me he encontrado con algo que no puedo explicar, ni puedo encontrar ninguna explicación para (o solución).

Tengo una aplicación AngularJS simple y estoy intentando enlazar un <span contenteditable="true"> a un valor, pero no funciona. P.EJ:

<!-- Works as expected -->
<input data-ng-model="chunk.value"></input>

<!-- Shows value, but doesn''t bind - changes not reflected in model -->
<span contenteditable="true">{{chunk.value}}</span>

<!-- This is empty -->
<span contenteditable="true" data-ng-model="chunk.value"></span>

¿Cómo puedo hacer que el último tramo use enlaces de 2 vías, de modo que editar su valor actualice chunk.value y viceversa?

Answer 1

Agregando el comportamiento ng-model-options="{ getterSetter: true }" a un elemento que tiene ng-model adjunto. También puede agregar ng-model-options="{ getterSetter: true }" a un <form> , lo que habilitará este comportamiento para todas las <input>s dentro de él.

El ejemplo muestra cómo usar ngModel con un getter/setter : página de demostración

Answer 2

El ngModel no funcionará como señaló @VtoCorleone. ngModel docs

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

Puede echar un vistazo a la directiva contenteditable .

De lo contrario, la solución potencial: tiene una función que se llama. Esa función luego actualiza el $scope.chunk.value dentro de su controlador. Y se ocuparía de los contenidos de los otros elementos a medida que se actualice el enlace.

No estoy seguro del aspecto o la funcionalidad exacta que está buscando, pero simplemente póngalo dentro de un <textarea> y <textarea> para que se vea como un <span> (sin borde ni fondo, etc.). Luego, cuando está focus , agrega un estilo adicional para saber que se puede editar. De esta manera le permitiría usar el ng-model ya que está destinado a ser utilizado. Aquí hay una implementación básica de este enfoque: Plunker

Answer 3

Para hacer que ng-model funcione con elementos contenteditable <span> , use una directiva personalizada:

app.directive(''contenteditable'', [''$sce'', function($sce) {
    return {
      restrict: ''A'', // only activate on element attribute
      require: ''?ngModel'', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''''));
        };

        // Listen for change events to enable binding
        element.on(''blur keyup change'', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if (attrs.stripBr && html === ''<br>'') {
            html = '''';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
}]);

Uso:

<span contenteditable ng-model="userContent">Change me!</span>
<p>{{userContent}}</p>

Para más información, ver

• Referencia de la API de ngModelController AngularJS - Ejemplo de control personalizado
• Referencia para desarrolladores de AngularJS - Crear directivas personalizadas

La DEMO

angular.module(''customControl'', [''ngSanitize''])
.directive(''contenteditable'', [''$sce'', function($sce) {
    return {
      restrict: ''A'', // only activate on element attribute
      require: ''?ngModel'', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''''));
        };

        // Listen for change events to enable binding
        element.on(''blur keyup change'', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if (attrs.stripBr && html === ''<br>'') {
            html = '''';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

[contenteditable] {
  border: 1px solid black;
  background-color: white;
  min-height: 20px;
}

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<body ng-app="customControl">
 <span contenteditable ng-model="userContent">Change me!</span>
 <hr>
 Content={{userContent}}
</body>

Answer 4

ng-model no está diseñado para usarse con span . Si es absolutamente necesario, puede escribir una directiva personalizada para esto. Esta directiva configurará un keydown,keyup listener en el span contentEditable y actualizará el modelo de alcance (dentro de $apply() ). Esto vinculará el contenido de span al modelo.

Rápidamente creé un plunker para ti. Echale un vistazo. Sincroniza el contenido de <span> con el modelo de alcance. Abra la consola del navegador para ver la actualización del modelo de alcance cada vez que escriba algo.

Answer 5

ng-bind ! Utilice ng-bind para el enlace unidireccional en ''span''.

Consulte aquí para ver un ejemplo: https://docs.angularjs.org/api/ng/directive/ngBind

Entonces, tu línea sería: <span contenteditable="true" ng-bind="chunk.value"></span>

Espero que esto ayude