AngularJS: ngInclude vs directiva

93

No entiendo muy bien cuándo usar una directiva y cuándo sería más apropiado usar nginclude. Tome este ejemplo: tengo un parcial, password-and-confirm-input-fields.htmlque es el html para ingresar y confirmar una contraseña. Utilizo esto tanto en la página de registro como en la página de cambio de contraseña. Esas dos páginas tienen un controlador cada una, el html parcial no tiene un controlador dedicado.

¿Debo usar directiva o ngIncludepara esto?

angularjs angularjs-directive angularjs-ng-include EricC
fuente
Iría con una directiva cada vez, pero tengo curiosidad por saber qué dirían las personas más experimentadas de Angular.
Austin Mullins
1
Si es realmente un componente independiente, probablemente debería tener su propio controlador asociado. En mi opinión, usaría un parcial, pero tengo curiosidad por obtener más información
tymeJV
4
Si hay algún código js necesario para ese parcial, use una directiva. Si es solo HTML, use ngInclude.
Daniel Beck

Respuestas:

122

Todo depende de lo que quieras de tu fragmento de código. Personalmente, si el código no tiene ninguna lógica, o ni siquiera necesita un controlador, entonces sigo ngInclude. Normalmente coloco fragmentos html más grandes y "estáticos" que no quiero que abarroten la vista aquí. (es decir, digamos una tabla grande cuyos datos provienen del controlador padre de todos modos. Es más limpio <div ng-include="bigtable.html" />que todas esas líneas que abarrotan la Vista)

Si hay lógica, manipulación DOM, o necesita que sea personalizable (también conocido como renderizado de manera diferente) en diferentes instancias en las que se usa, entonces directivesson la mejor opción (son desalentadoras al principio, pero son muy poderosas, dale tiempo) .

ngInclude

A veces verás ngInclude'sque se ven afectados por su exterior $scope/ interface. Como un repetidor grande / complicado, digamos. Estas 2 interfaces están unidas debido a esto. Si algo en los $scopecambios principales , debe alterar / cambiar su lógica dentro de su parcial incluido.

Directivas

Por otro lado, las directivas pueden tener alcances / controladores / etc. explícitos. Entonces, si está pensando en un escenario en el que tendría que reutilizar algo varias veces, puede ver cómo tener su propio alcance conectado haría la vida más fácil y menos confuso.

Además, siempre que vaya a interactuar con el DOM, debe usar una directiva. Esto lo hace mejor para las pruebas y desacopla estas acciones de un controlador / servicio / etc., ¡que es algo que desea!

Sugerencia: asegúrese de no utilizar la restricción: 'E' si le interesa IE8. Hay formas de evitar esto, pero son molestas. Simplemente haz la vida más fácil y quédate con el atributo / etc.<div my-directive />

Componentes [Actualización 1/3/2016]

Agregado en Angular 1.5, es esencialmente un envoltorio .directve(). El componente debe utilizarse la mayor parte del tiempo. Elimina una gran cantidad de código de directiva repetitivo, al establecer de forma predeterminada cosas como restrict: 'E', scope : {}, bindToController: true. Recomiendo encarecidamente usarlos para casi todo en su aplicación, para poder realizar la transición a Angular2 más fácilmente.

En conclusión:

Debería crear componentes y directivas la mayor parte del tiempo.

  • Más extensible
  • Puede crear una plantilla y tener su archivo de forma externa (como ngInclude)
  • Puede optar por utilizar el ámbito principal o su propio ámbito aislado dentro de la directiva.
  • Mejor reutilización en toda su aplicación

Actualización 1/3/2016

Ahora que Angular 2 está terminando lentamente, y conocemos el formato general (por supuesto, todavía habrá algunos cambios aquí y allá) solo quería agregar lo importante que es hacerlo components(a veces directivas si necesita que sean restringidas: ' E 'por ejemplo).

Los componentes son muy similares a los de Angular 2 @Component. De esta manera estamos encapsulando lógica y html en la misma área.

Asegúrese de encapsular tantas cosas como pueda en los componentes, ¡hará que la transición a Angular 2 sea mucho más fácil! (Si elige hacer la transición)

Aquí hay un buen artículo que describe este proceso de migración usando directives(muy similar si iba a usar componentes, por supuesto): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/

Mark Pieszak - Trilon.io
fuente
5
Estoy de acuerdo con esta respuesta. La curva de aprendizaje de las directivas es empinada, pero realmente vale la pena una vez que la obtiene.
Jazzy
@mcpDESIGNS, un caso que quizás no se ajuste perfectamente a esta respuesta (al menos no los dos primeros párrafos). Si tengo un navegador parcial, con su propio controlador, y solo lo usaré una vez (en el archivo index.html), entonces esto probablemente debería ser parcial y no una directiva, ya que se usa solo una vez (es una especie de aplicación separada en el sentido de que no está incluida como parte de ngview), incluso si tiene su propia lógica. ¿O?
EricC
Esto sigue siendo confuso ... también puede especificar un controlador al usar ngInclude, mire esto: stackoverflow.com/questions/13811948/…
Marwen Trabelsi
1
Por supuesto, pero siempre está completamente conectado al controlador principal de alguna manera. Donde una directiva puede crear un controlador dentro de sí misma para cuando se carga la plantilla. Puede ser completamente separado (si lo desea)
Mark Pieszak - Trilon.io
1
Lo mejor que puede hacer es abstraer este concepto en una fábrica o algo así, de esa manera puede llamarlo desde una linkfunción y ¡listo! Sin embargo, hubiera sido bueno incluir directivas, sin lugar a dudas :( @Arwin
Mark Pieszak - Trilon.io