angularjs - page - navigationend angular 4

Comportamiento del controlador dentro de las directivas.

Question

Sé que un $scope desde un controller se puede compartir con una función de enlace en las directives .

Por ejemplo, en este código puedo llamar a una función del controlador declarado para imprimir "Hola mundo" en la consola del navegador:

 .directive(''myDirective'', [function () {
        return {
            restrict : ''E'',
            replace : true,
            controller: ''MyController'',
            templateUrl : ''directives/myDirective.tpl.html'',
            link : function (scope, elem, attrs, controller) {
                scope.message = ''Hello World!'';
            }
        };
    }])

    .controller(''MyController'', [function ($scope, $element, $attrs, $log, $timeout) {

        // $timeout to wait the link function to be ready.
        $timeout(function () {
            // This prints Hello World as expected.
            $log.debug($scope.message);
         });


        });
    }])

Ok, esto funciona bien.

Mis preguntas son :

1. En este enfoque, ¿es el MISMO alcance que compartirá el controlador y la directiva?
2. ¿Cuáles son las consecuencias de utilizar este enfoque? Supongamos que no manipularé los elementos DOM en el controller , solo en la link function .
3. ¿Realmente necesito evitar manipular elementos DOM en este controller ? ¿Incluso si $scope , $elem , etc son los mismos?

Estas son preguntas que no encontré en la documentación de Directiva Angular .

Aquí hay un plunker con el código de ejemplo .

Answer 1

En este enfoque, ¿es el MISMO alcance que compartirá el controlador y la directiva?

Sí lo es.

¿Cuáles son las consecuencias de utilizar este enfoque? Supongamos que no manipularé los elementos DOM en el controlador, solo en la función de enlace.

El controlador es lo que proporciona el comportamiento de la directiva, al igual que con una aplicación Angular normal. Dicho esto, debe manipular el alcance dentro de la función del controlador solamente. Si necesita cambiar el alcance de la función de enlace, llame a un método para hacerlo. Además, dado que el controlador se ejecuta antes de la función de enlace, debe inicializar el alcance en el primero para que este último pueda obtener un modelo válido para trabajar.

¿Realmente necesito evitar manipular elementos DOM en este controlador? ¿Incluso si $ scope, $ elem, etc son los mismos?

Por definición, la función de enlace es el lugar para realizar la manipulación de DOM. No puedo encontrar una razón técnica que le impida manipular el DOM dentro del controlador de la directiva, excepto que no debería hacerlo. De hecho, para comprobar que acabo de cambiar una directiva, he escrito y movido todo el código de la función de enlace a la función del controlador y todo sigue funcionando. Pero si mezcla la lógica del alcance y la manipulación del DOM, creo que será difícil rastrear lo que está pasando.

Por último, puede encontrar útil este artículo: Entendiendo las directivas .

Answer 2

1) Sí, ambos comparten el mismo ámbito, ya que está utilizando el controlador de la directiva para registrar el alcance, lo que significa que puede colocar el ''MyController'' dentro de la directiva como tal

return {
  replace: true,
  controller: function($scope,...){ //  equals MyController
  }
}

Si el controlador es una envoltura de la directiva en lugar de dentro de ella y el ámbito de la directiva se establece en verdadero o un hash de objeto, entonces no compartirán el mismo ámbito.

2) Sin consecuencias, simplemente NO manipule el DOM en el controlador, uno de los usos del controlador es conectar las directivas entre sí para obtener o establecer datos de un servicio o simplemente mediante un simple aumento del alcance (es decir: scope.message = "Hola mundo") en cualquier caso, deben ser mínimos. La forma en que lo tiene configurado es ideal si desea compartir datos entre otras directivas, simplemente puede requerir el controlador de esta directiva.

3) Sí, evite la manipulación de DOM en el controlador, no está destinada a la lógica de presentación o lo que ve el usuario, ese es el rol de las directivas, recuerde el SOC (separación de preocupaciones) cada parte del patrón MVC / MV * tiene su propio rollo jugar.

Piense en ello de una manera simple, como este usuario ve el botón en la capa de presentación, el usuario hace clic en el botón; una función para el clic del botón se produce en la capa empresarial (controlador) que toma los resultados y los almacena en la capa de datos / modelo.

Advertencia: si el botón hace otra cosa que no sea procesar un comando (cálculos, evaluaciones, etc.) entre el usuario y la capa de datos, como agregar clases (manipulación DOM) que la función pertenece a una directiva.

Una gran lectura y más en profundidad here

Answer 3

Ver actualizado plunker: http://plnkr.co/edit/pT8rEDz7gWKUPYIZhUYA?p=preview

1. Sí, este es el mismo alcance. Los ID son los mismos y se puede ver que los contenidos se actualizaron.
2. Las implicaciones de un alcance compartido es que es difícil rastrear quién cambió qué. Recomiendo encarecidamente que sus directivas utilicen un alcance aislado.
3. Siéntase libre de manipular el DOM. Rastrear los cambios será un ejercicio divertido ... También recomendaría encarecidamente a cualquier manipulación de DOM. Separaría la manipulación de DOM de otras actividades envolviéndolas en una directiva.

Uno de los puntos fuertes de Angular son las directivas, así que las usaría siempre que sea posible para separar sus inquietudes.