escape - AngularJS: ngInclude vs directive
ng-bind-html angularjs (1)
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.html , que es el html para ingresar y confirmar una contraseña. Lo uso 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 ngInclude para esto?
Todo depende de lo que quieras de tu fragmento de código. Personalmente, si el código no tiene ninguna lógica, o incluso no necesita un controlador, entonces voy con ngInclude . Normalmente pongo grandes fragmentos html más "estáticos" que no quiero saturar la vista aquí. (es decir: digamos que una tabla grande <div ng-include="bigtable.html" /> datos provienen del Controlador padre de todos modos. Es más limpio tener <div ng-include="bigtable.html" /> que todas esas líneas que abarrotan la Vista)
Si hay lógica, manipulación del DOM, o si necesita que sea personalizable (también conocido como procesamiento diferente) en diferentes instancias de uso, entonces las directives son la mejor opción (son desalentadoras al principio, pero son muy poderosas, dale tiempo )
ngInclude
A veces verá ngInclude''s que se ven afectados por su $scope / interface exterior. Tal como un repetidor grande / complicado, digamos. Estas 2 interfaces están unidas debido a esto. Si algo en el $scope principal cambia, debe modificar / cambiar su lógica dentro de su parcial incluido.
Directivas
Por otro lado, las directivas pueden tener alcances / controladores / etc. explícitos. Por lo tanto, si está pensando en un escenario en el que tendría que volver a utilizar 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, cada vez que va a interactuar con DOM, debe usar una directiva. Esto lo hace mejor para las pruebas, y separa estas acciones de un controlador / servicio / etc. ¡que es lo que desea!
Consejo: asegúrese de no utilizar restringir: ''E'' si le importa IE8. Hay formas de evitar esto, pero son molestas. Simplemente haga la vida más fácil y quédese con el atributo / etc. <div my-directive />
Componentes [Actualización 01/03/2016]
Agregado en Angular 1.5, es esencialmente un contenedor alrededor de .directve() . El componente debe usarse la mayor parte del tiempo. Se elimina una gran cantidad de código de la directiva repetitiva, por defecto a cosas como restrict: ''E'', scope : {}, bindToController: true . Recomiendo usar estos para casi todo en tu aplicación, para poder hacer la transición a Angular2 más fácilmente.
En conclusión:
Debería crear componentes y directivas la mayoría de las veces.
- Más extensible
- Puede plantilla y tener su archivo externamente (como ngInclude)
- Puede optar por usar el alcance principal, o su propio alcance aislado dentro de la directiva.
- Mejor reutilización en toda la aplicación
Actualización 01/03/2016
Ahora que Angular 2 se está terminando lentamente, y sabemos que el formato general (por supuesto, todavía habrá algunos cambios aquí y allá), solo quería agregar la importancia de los components (a veces las directivas si necesita restringirlas): ''E'' por ejemplo).
Los componentes son muy similares al @Component Angular 2. De esta forma encapsulamos logic & html en la misma área.
Asegúrate de encapsular tantas cosas como puedas 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 vas a usar componentes por supuesto): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/