javascript - services - Enlace de datos bidireccional en directivas AngularJS

scope data angularjs

Question

He estado tratando de definir directivas para que pueda mostrar diferentes "widgets" en un formulario, dependiendo del tipo de campo y sus parámetros, que se almacenan en una base de datos. Necesito reaccionar a diferentes tipos de escenarios, de ahí la necesidad de directivas para manejar el diseño.

Mientras jugaba con algunos ejemplos, se me ocurrió un código que * algo * funciona:

HTML

<input type="text" ng-model="myModel" style="width: 90%"/>  
<div class="zippy" zippy-title="myModel"></div>

Directiva

myApp.directive(''zippy'', function(){
    return {
      restrict: ''C'',
      // This HTML will replace the zippy directive.
      transclude: true,
      scope: { title:''=zippyTitle'' },
      template: ''<input type="text" value="{{title}}"style="width: 90%"/>'',
      // The linking function will add behavior to the template
      link: function(scope, element, attrs) {
            // Title element
            element.bind(''blur keyup change'', function() {
                scope.$apply(read);
            });

            var input = element.children();


            function read() {
                scope.title = input.val();
            }
        }
    }
});

Esto parece funcionar (aunque notablemente más lento que una * variable * angularJS variable vinculante), pero creo que debe haber una mejor manera de hacerlo. ¿Alguien puede arrojar algo de luz sobre el asunto?

Answer 1

¿Quieres decir algo como this ?

Básicamente utilizo el ejemplo de @ Flek.
La única diferencia es ng-model=''title''

El truco para hacer un enlace bidireccional es ng-model, y dice en el document :

ngModel es una directiva que le dice a Angular que haga un enlace de datos bidireccional. Funciona junto con input, select, textarea. También puede escribir fácilmente sus propias directivas para usar ngModel.

<input type="text" ng-model="title" style="width: 90%"/>

Answer 2

Aquí hay una forma de pasar a un parámetro de devolución de llamada en una directiva. La plantilla del controlador:

    <component-paging-select-directive
            page-item-limit="{{pageItemLimit}}"
            page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"
            ></component-paging-select-directive>

La directiva:

angular.module(''component'')
    .directive(''componentPagingSelectDirective'', [
        function( ) {
            return {
                restrict: ''E'',
                scope: { 
                    // using the ''='' for two way doesn''t work
                    pageItemLimit:  ''@'', // the ''@'' is one way from controller
                    pageChangeHandler: ''&''
                },
                controller: function($scope) {   
                    // pass value from this scope to controller method. 
                    // controller method will update the var in controller scope
                    $scope.pageChangeHandler({
                        paramPulledOutOffThinAir: $scope.pageItemLimit
                    })

                }, ...

En el controlador:

angular.module(''...'').controller(...
        $scope.pageItemLimit = 0; // initial value for controller scoped var

        // complete the data update by setting the var in controller scope 
        // to the one from the directive
        $scope.pageChangeHandler = function(paramPulledOutOffThinAir) {
            $scope.pageItemLimit = paramPulledOutOffThinAir;
        }

Tenga en cuenta la diferencia en los parámetros de función para la directiva (un objeto con un parámetro como claves), la plantilla (claves "desenvueltos" del objeto parámetro en la directiva) y la definición del controlador.

Answer 3

No sé por qué está activando manualmente el método $apply porque realmente no lo necesita.

Edité el ejemplo que usaste en la página Angular e incluí la entrada. Funciona para mí: http://jsfiddle.net/6HcGS/2/

HTML

<div ng-app="zippyModule">
  <div ng-controller="Ctrl3">
    Title: <input ng-model="title">
    <hr>
    <div class="zippy" zippy-title="title"></div>
  </div>
</div>​

JS

function Ctrl3($scope) {
  $scope.title = ''Lorem Ipsum'';
}

angular.module(''zippyModule'', [])
  .directive(''zippy'', function(){
    return {
      restrict: ''C'',
      replace: true,
      transclude: true,
      scope: { title:''=zippyTitle'' },
      template: ''<input type="text" value="{{title}}"style="width: 90%"/>'',
      link: function(scope, element, attrs) {
        // Your controller
      }
    }
  });

ACTUALIZAR maxisam es correcto, debe usar ng-model lugar de vincular la variable con el valor de la siguiente manera:

<input type="text" ng-model="title" style="width: 90%"/>

Aquí está la versión de trabajo: http://jsfiddle.net/6HcGS/3/