come impostare un valore interpolato nella direttiva angolare?

Question

Come si imposta il valore interpolato in una direttiva? Posso leggere il valore corretto dal seguente codice, ma non sono stato in grado di impostarlo.

JS:

app.directive('ngMyDirective', function() { 
    return function(scope, element, attrs) { 
     console.log(scope.$eval(attrs.ngMyDirective)); 

     //set the interpolated attrs.ngMyDirective value somehow!!! 
    } 
}); 

html:

<div ng-my-directive="myscopevalue"></div> 

dove myscopevalue è un valore sul campo di applicazione del mio controller.

Answer 1

Se si desidera impostare un valore sul campo di applicazione, ma non si conosce il nome della proprietà (in anticipo), è possibile utilizzare la sintassi object[property]:

scope[attrs.myNgDirective] = 'newValue'; 

Se la stringa in l'attributo contiene un punto (es. myObject.myProperty), questo non funzionerà; è possibile utilizzare $eval per fare un incarico:

// like calling "myscopevalue = 'newValue'" 
scope.$eval(attrs.myNgDirective + " = 'newValue'"); 

[Aggiornamento: Si dovrebbe davvero usare $parse invece di $eval. . Vedere Mark's answer]

Se stai usando un ambito isolato, è possibile utilizzare il = della nota:

app.directive('ngMyDirective', function() { 
    return { 
     scope: { 
      theValue: '=ngMyDirective' 
     }, 
     link: function(scope, element, attrs) { 
      // will automatically change parent scope value 
      // associated by the variable name given to `attrs.ngMyDirective` 
      scope.theValue = 'newValue'; 
     } 
    } 
}); 

Si può vedere un esempio di questo in this Angular/jQuery color picker JSFiddle example, dove assegnando a scope.color all'interno della direttiva aggiorna automaticamente la variabile ha superato in la direttiva sull'ambito del controller.

Answer 2

Ogniqualvolta una direttiva non utilizza un ambito isolato e si specifica una proprietà dell'ambito utilizzando un attributo e si desidera modificare il valore di tale proprietà, suggerisco di utilizzare $parse. (Penso che la sintassi è più bello di $ eval di.)

app.directive('ngMyDirective', function ($parse) { 
    return function(scope, element, attrs) { 
     var model = $parse(attrs.ngMyDirective); 
     console.log(model(scope)); 
     model.assign(scope,'Anton'); 
     console.log(model(scope)); 
    } 
}); 

fiddle

$parse opere se l'attributo contiene un punto.