javascript - ejemplos - angularjs tutorial

Cómo establecer el valor de propiedad del objeto del controlador angular de la directiva en el alcance del niño

Question

Tengo una directiva dentro de un repetidor ng que debe establecer una propiedad de alcance. Por favor, vea el violín aquí: http://jsfiddle.net/paos/CSbRB/

El problema es que la propiedad del alcance se da como un valor de atributo como este:

<button ng-update1="inputdata.title">click me</button>

Se supone que la directiva establece la propiedad del ámbito inputdata.title en alguna cadena. Esto no funciona:

app.directive(''ngUpdate1'', function() {
    return function(scope, element, attrs) {
        element.bind(''click'', function() {
            scope.$apply(function() {
                scope[ attrs.ngUpdate1 ] = "Button 1";
            });
        });
    };
});

Sin embargo, la asignación directa funciona:

scope["inputdata"]["title"] = "Button 1";

¿Puede decirme cómo puedo establecer una propiedad de alcance con. notación en su nombre de una directiva?

PD: La razón por la que el violín está usando un repetidor es porque hace que las directivas estén en los ámbitos de los niños. Cuando están en un ámbito secundario, no puede escribir en las propiedades del ámbito que son primitivas. Es por eso que necesito una propiedad de objeto con "." en el nombre. Vea la explicación larga aquí: ¿Cuáles son los matices del alcance de la herencia prototípica / prototípica en AngularJS?

Gracias

Answer 1

No estoy seguro de cuál es el objetivo general, pero una forma es crear 2 atributos, uno para el objeto objetivo y otro para la propiedad de ese objeto:

<button ng-update1  obj="inputdata" prop="title">

app.directive(''ngUpdate1'', function() {
    return function(scope, element, attrs) {
        element.bind(''click'', function() {
            scope.$apply(function() {                
                scope[ attrs.obj ][attrs.prop] = "Button 1";               

            });
        });
    };
});

DEMO: http://jsfiddle.net/CSbRB/9/

Alternativamente, utilizando el formato existente, puede split() valor de su actual atributo ng-update1 y usar la matriz de resultados para el objeto y la propiedad en notación

 element.bind(''click'', function() {
           var target=attrs.ngUpdate1.split(''.'');
            scope.$apply(function() {                
                scope[ target[0] ][target[1]] = "Button 1";               

            });
        });

DEMO con ambos enfoques: http://jsfiddle.net/CSbRB/10/

Un enfoque más en el que crea un ámbito aislado en la directiva y puede pasar la referencia al objeto inputdata y extraer el nombre de la propiedad del atributo (el mismo marcado que en la segunda versión):

app.directive(''ngUpdate3'', function () {
    return {
        scope: {
           targetObject: ''=obj''
        },
        link: function (scope, element, attrs) {
            element.bind(''click'', function () {  
               scope.$apply(function () {
                    scope.targetObject[attrs.prop]=''Button 3'';

                });
            });
        }
    }
});

http://jsfiddle.net/CSbRB/11/

Answer 2

$ parse resolverá su problema.

<button ng-update1="inputdata.title">

app.directive(''ngUpdate1'', function($parse) {
    return function(scope, element, attrs) {
        var model = $parse(attrs.ngUpdate1);
        console.log(model(scope));  // logs "test"
        element.bind(''click'', function() {
           model.assign(scope, "Button 1");
           scope.$apply();
        });
    };
});

Violín

Siempre que una directiva no use un alcance aislado y especifique una propiedad de ámbito usando un atributo, y si desea modificar el valor, use $parse .

Si no necesita modificar el valor, puede usar $eval lugar:

console.log(scope.$eval(attrs.ngUpdate1));