0

Ayuda para obtener el valor desde un custom-directive

Tengo el siguiente código, lo único que requiero es poder obtener el valor que el campo de texto obtiene cuando se typea.

La funcion getName debe cambiar el nombre mostrado.

Agrego el código:

'use strict';

angular
 .module('app', [])
 .controller("Controller", function ($scope) {
  $scope.getName = function() {
   return $scope.name;
  };
 })
 .controller("EditController", function($scope) {
  $scope.editingMode = true;
 })
 .directive("newName", function ($parse) {
  return {
  template: 'Write name: <input type="text" ng-model="name">'
 };
});

Angular

<div ng-controller="Controller">
  <h1>Hello, {{ getName() }}</h1>

  <div ng-controller="EditController">
    <new-name ng-show="editingMode"></new-name>
  </div>
</div>

1 respuesta 1

0

Tienes que especificarle que la directiva es un elemento utilizando restrict: 'E':

'use strict';

angular
    .module('app', [])
    .controller("Controller", function($scope) {
        
        $scope.getName = function() {
            return $scope.name;
        };
    })
    .controller("EditController", function($scope) {
        $scope.editingMode = true;
        
    })
    .directive("newName", function($parse) {
        return {
            restrict:"E",
            template: 'Write name: <input type="text" ng-model="name">'
        };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="Controller" ng-app="app">
  <h1>Hello, {{ getName() }}</h1>

  <div ng-controller="EditController">
    <new-name></new-name>
    {{name}}
  </div>
</div>

Y como ya habras notado, no te actualiza el titul donde tienes {{ getName() }}, esto porque los metodos no responde a la actualizacion del modelo. Tienes que especificar el modelo para que se actualize el titulo. Osea, reemplazar {{ getName() }} por {{ name }}:

'use strict';

angular
    .module('app', [])
    .controller("Controller", function($scope) {
        
        $scope.getName = function() {
            return $scope.name;
        };
    })
    .controller("EditController", function($scope) {
        $scope.editingMode = true;
        
    })
    .directive("newName", function($parse) {
        return {
            restrict:"E",
            template: 'Write name: <input type="text" ng-model="name">'
        };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="Controller" ng-app="app">
  <h1>Hello, {{ name }}</h1>

  <div ng-controller="EditController">
    <new-name></new-name>
    {{name}}
  </div>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.