Separating DOM manipulations with Angular controllers - Best practice

Question

Trying to find the “best” way to create an Angular application, I found several articles on best practice. Using this input, I did the following:

angular.module('xApp', []) //..... some services, factories, controllers, .... .directive('dirNotification',[ function dirNotification() { return { scope: {}, templateUrl: 'xNotification.html', replace: true, controller: 'CtrlNotification', link: function($scope){ // if this is 'DOM manipulation, should be done here ... ? /* $scope.$on('session.update',function(event, args) { if (args == null) { $scope.notificationdata.username = ""; $scope.notificationdata.sid = ""; } else { $scope.notificationdata.username = args.username; $scope.notificationdata.sid = args.accessToken; } }); */ } }; }]) .controller('CtrlNotification',['$scope' ,function CtrlNotification($scope) { $scope.notificationdata = { username: "", sid: "" }; // this is not real DOM manipulation, but only view data manipulation? $scope.$on('session.update',function(event, args) { if (args == null) { $scope.notificationdata.username = ""; $scope.notificationdata.sid = ""; } else { $scope.notificationdata.username = args.username; $scope.notificationdata.sid = args.accessToken; } }); }]) 

An HTML template is simple:

 <div> <p>{{notificationdata.username}}</p> <p>{{notificationdata.sid}}</p> </div> 

So my question is, should data changes be treated as DOM manipulations? The current version that does this in the controller seems to me more practical (for example, setting default values). Also, if I add more functionality to this, the directory link block will grow and contain more functions than definitions. I assume that inside this directive you need to do things like changing colors or hiding elements depending on the data in the area.

What does community mean? Do you agree with my assumptions?

Thanks Rainer

Answer 1

As a good start, read this question and answer. .

Controllers

The reason you shouldn't manipulate the DOM (or search for DOM elements or make any suggestions about the representation, for that matter) in the controller is because the purpose of the controller is to deal only with the state app - by changing the ViewModel - regardless of how the state is reflected in the view. This controller does this by responding to events from the Model and from the View and Setting ViewModel properties. Angular will deal with the reflection of the "state" of the application in a binding view.

So yes, of course, changing the ViewModel makes the View react and the DOM process, but the idea is that the controller should not know or care about how the View responds. This preserves the integrity of the problems.

directives:

If the built-in directives are not enough and you need tighter control over how the View responds, this is a good reason to create a custom directive.

Two things to keep in mind about directives.

1) It is useful to think of directives as reusable components, so the smaller the application logic, the better. And definitely, avoid any business logic. Define inputs and outputs (usually through attributes) and respond only to them. Event listeners (like you) are very specific to the application (if this directive is not intended to be used with another directive that publishes the event), it is better to avoid it if possible.

 .directive("notification", function(){ return { restrict: "A", scope: { notification: "=" // let the attribute get the data for notification, rather than // use scope.$on listener }, // ... } }) 

2) Just because the "allowed for DOM manipulation" directives does not mean that you should forget about the separation of ViewModel-View. Angular allows you to define an area within a link or controller function and provide a template with all typical Angular expressions and bindings.

 template: '<div ng-show="showNotification">username:{{notification.username}}</div>', // controller could also have been used here link: function(scope, element, attrs){ scope.showNotification = Math.floor(Math.random()* 2); }