javascript - ejemplos - ¿Por qué se considera una mala idea manipular el DOM en los controladores?
dom javascript wikipedia (5)
Técnicamente, el controlador debería ser más pequeño y compacto, no debería estar jugando con un DOM. El controlador solo estará interesado en tener una lógica de negocios y lógica de nivel vinculante a la que se llame en eventos.
Según mi punto de vista, la razón detrás de " No deberías manipular DOM desde el controlador " es, es solo por la separación de la preocupación. Si realiza la manipulación DOM desde el controlador, entonces se acopla estrechamente a su controlador, y ese fragmento de código no puede volverse a usar. Entonces, escribiendo ese código en una directiva, el mismo código podría convertirse fácilmente en un componente recargable y reutilizable. Puede usar la misma manipulación de DOM en cualquier otro lugar simplemente poniendo directive tag / element.
Al observar la definición de directivas, analizará que solo se trata de jugar con DOM, ya que le da un controlador a DOM antes de renderizarlo usando la función preLInk y también post-render de DOM que puede obtener en la función postLink .
También la directiva te hace disponible el elemento directivo, no es necesario compilarlo porque ese element ya se ha compilado con jQLite que es la versión más pequeña de jQuery utilizada en angular. No hay necesidad de selector aquí para obtener el elemento directivo DOM.
Mucha gente me ha dicho que es muy malo manipular el DOM en los controladores, pero cuál es exactamente el motivo. ¿Cómo afecta la aplicación que estás haciendo? ¿Cuáles son las mejores prácticas para hacer eso y cómo se hace?
La explicación más simple es la capacidad de prueba y la reutilización.
Los controladores deben contener solo lógica comercial. Poner cualquier lógica de presentación en Controladores afecta significativamente su capacidad de prueba. Angular tiene enlaces de datos para la mayoría de los casos y directivas para encapsular la manipulación DOM manual. Comprender los controladores
Para la mayoría de los desarrolladores que provienen de un fondo jQuery, AngularJS requiere un gran cambio mental.
La razón principal para no hacer manipulaciones de DOM estilo jQuery cuando se trabaja con AngularJS es que su aplicación angular no tendrá conocimiento de ningún cambio que realice en el DOM con jQuery, por lo que no podrá vincular esos elementos DOM en ningún modelo sin entrar en hackers angulares importantes.
En cuanto a las mejores prácticas, recomendaría tomar un conjunto completo de tutoriales como los de http://codeschool.com para ayudarlo a dar el salto de la "mentalidad jQuery" a la mentalidad Angular pura.
Lo mejor que hice como desarrollador angular fue eliminar la biblioteca jQuery de mis proyectos Angular por completo, así que no tuve la tentación de volver a mi antigua y falsa forma.
Pero para responder a su pregunta más específicamente, hay muchas formas de agregar elementos al DOM en una aplicación angular. Te sugiero que publiques un código y una pregunta específica si estás tratando de descubrir cómo hacer algo como "Angular Way".
El ejemplo perfecto es algo como jQuery''s append () y remove (). No tienen cabida en una aplicación angular porque cualquier elemento adjunto por jQuery no será visible para los modelos de Angular, lo que los hará inútiles para la aplicación en sí.
Por lo tanto, en lugar de agregar y eliminar con jQuery, probablemente desee representar los elementos DOM con una directiva ng-repeat (si hay varios elementos DOM similares que deben agregarse) y agregar elementos DOM utilizando ng-click para agregar datos al objeto al que está ligada la directiva ng-repeat, o si no hay varios elementos similares para agregar, tal vez solo necesite usar ng-show o ng-if para representar solo el elemento DOM después del clic .
Aquí hay un ejemplo de estos dos métodos:
http://plnkr.co/edit/4MSOoTrGGom2DpGj00x4?p=preview
<body ng-controller="MainCtrl">
<p ng-repeat="name in names">{{name}}</p>
<form ng-submit="addName(newName)">
<input ng-model="newName" type="text"/>
<button type="submit">Add Name</button>
</form>
<br>
<br>
<h1 ng-show="showHeader">Header Element</h1>
<button ng-show="!showHeader" ng-click="showHeader = !showHeader">Show Header</button>
<button ng-show="showHeader" ng-click="showHeader = !showHeader">Hide Header</button>
</body>
JS:
var app = angular.module(''plunker'', []);
app.controller(''MainCtrl'', function($scope) {
$scope.names = [''Ramm'', ''John'', ''Keith'', ''Susan'', ''Janice''];
$scope.addName = function(newName){
$scope.names.push(newName);
};
});
Se supone que debe poner la manipulación DOM en las directivas y usar el enlace de datos angular siempre que sea posible para hacer la manipulación DOM.
PUEDE poner toda la manipulación DOM en un controlador, pero esto a menudo conduce a un controlador monolítico. Dado que hay patrones más adecuados para la manipulación de DOM a través del enlace de datos y las directivas, debe aprovecharlos al máximo.
Manipularías elementos DOM en una directiva. Tienes que entender estas cosas,
Directivas : - Son una herramienta poderosa para trabajar y modificar el DOM. Angular define las directivas como trozos de código que usas para la manipulación DOM.
Controladores : - Los controladores deben usarse exclusivamente para cablear servicios, dependencias y otros objetos, y asignarlos a la vista a través del alcance. También son una excelente opción cuando necesitan manejar lógica empresarial compleja en sus puntos de vista.
Servicios : los servicios son principalmente una forma de comunicarse entre los controladores, pero puede inyectar un servicio en otro. los servicios a menudo se utilizan como una forma de llegar a sus tiendas de datos
Lea estos, directiveVsserviceVsController y cuándo usar qué?