javascript - ejemplos - directive controller angular

Las directivas AngularJS atribuyen el acceso desde el controlador

Question

Estoy intentando acceder a los atributos de una directiva en la función del controlador. Sin embargo, para cuando accedo a él, no está definido. Me di cuenta de que si hago un temporizador simple, funciona. ¿Hay alguna manera de ejecutar código solo después de la directiva y sus alcances están listos y configurados para ser utilizados?

Hice un violín con eso. Asegúrate de que tu consola esté abierta. http://jsfiddle.net/paulocoelho/uKA2L/1/

Aquí está el código que estoy usando en el violín:

<div ng-app="testApp" >
<testcomponent text="hello!"></testcomponent>
</div>

var module = angular.module(''testApp'', [])
.directive(''testcomponent'', function () {
return {
restrict: ''E'',
template: ''<div><p>{{text}} This will run fine! </p></div>'',
scope: {
text: ''@text''
},
controller: function ($scope, $element) {
console.log($scope.text); // this will return undefined
setTimeout(function () {
console.log($scope.text); // this will return the actual value...
}, 1000);
},
link: function ($scope, $element, $attrs) {
console.log($scope.text);
setTimeout(function () {
console.log($scope.text);
}, 1000);
}
};
});

Answer 1

Desde Angular 1.3, puede usar bindToController . Aquí hay una muestra de cómo lo uso. Aquí, agrego el atributo al alcance y luego uso bindToController para usarlo dentro del controlador:

var module = angular.module(''testApp'', [])
.directive(''testcomponent'', function () {
return {
restrict: ''E'',
template: ''<div><p>{{text}} This will run fine! </p></div>'',
scope: {
text: ''@text''
},
controller: function () {
console.log(this.text);
},
controllerAs: ''vm'',
bindToController: true
};
});

Angular 1.3 introduce una nueva propiedad para el objeto de definición de directiva llamado bindToController, que hace exactamente lo que dice. Cuando se establece en verdadero en una directiva con ámbito aislado que utiliza controllerAs, las propiedades del componente están vinculadas al controlador y no al alcance. Eso significa que Angular se asegura de que, cuando se crea una instancia del controlador, los valores iniciales de los enlaces de alcance aislados estén disponibles en esto, y los cambios futuros también estén disponibles automáticamente.

Answer 2

En lugar de usar $scope para obtener el valor de los atributos de directiva, personalmente prefiero usar $attrs para la función del controller , o simplemente attrs en el 3er parámetro de la función de link . No tengo ningún problema cuando obtengo el valor de los atributos de un controller siguiendo el código sin tiempo de espera:

var module = angular.module(''testApp'', [])
.directive(''testcomponent'', function () {
return {
restrict: ''E'',
template: ''<div><p>{{text}} This will run fine! </p></div>'',
scope: {
text: ''@text''
},
controller: [''$scope'',''$attrs'', function ($scope, $attrs) {
console.log($attrs.text); // just call to the $attrs instead $scope and i got the actual value
$scope.text = $attrs.text; //assign attribute to the scope
}]
};
});

Answer 3

En un ámbito aislado, no se puede acceder a una propiedad de ámbito local definida con ''@'' en la función de enlace. Como @remigio ya se mencionó, tales propiedades de alcance local undefined están undefined en ese punto. $ attrs. $ observe () o $ scope. $ watch () se debe usar para obtener asincrónicamente el valor (interpolado).

Si está pasando un valor constante en el atributo, (es decir, no se requiere interpolación, es decir, el valor del atributo no contiene {{}} s) no es necesario ''@'' u $ observer o $ watch. Puedes usar $ attrs. attribute_name una vez como @hugo sugiere, o si está pasando un número o un booleano y desea obtener el tipo apropiado, puede usar $ scope. $ eval ($ attrs. attribute_name ) una vez.

Si usa ''='' para vincular una propiedad de ámbito local a una propiedad de ámbito principal, el valor de la propiedad estará disponible en la función de enlace (no es necesario $ observar o $ watch o $ eval).

Answer 4

La función de enlace se llama antes del bucle $ digest, en ese momento las variables de ámbito no están definidas. Mire este capítulo y este otro para comprender cómo funciona la función de enlace. Solo utiliza la función de enlace para definir relojes y / o comportamientos para la directiva, no para manipular el modelo, esto se hace en controladores.

Answer 5

Lo que funciona es, si configura

scope.text = $attrs.text;

dentro de las funciones de vinculación y control. Esto solo funcionará inicialmente, ya que no existe un enlace de datos de 2 vías. $attrs.observe embargo, puedes usar $attrs.observe .

Ver violín: http://jsfiddle.net/JohannesJo/nm3FL/2/

Answer 6

Si está accediendo a este valor de su directiva para insertar en su vista usando una directiva, puede acceder a este atributo usando la API $ compile y haciendo algo como esto

var string = "<div> " + scope.text + "</div>";
$compile(string)(scope, function(cloned, scope){
element.append(cloned);
});