javascript - Separating DOM manipulation from Angular controllers - Best Practice wanted

Question

Trying to find the "best" way building an Angular App I found several best practice articles. With this input I did this:

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;
        }
    });

}])

The HTML template is simply this:

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

So my question is, should data changes to be considered as DOM manipulation? The present version doing this within the controller seems more practical to me (e.g. setting default values). Also if I add more functionality to that, the "directive link" block will grow and contain more functions than definitions. I guess within the directive things like changing colors or hiding elements depending on the scope data should be done there.

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

Thanks, Rainer

Answer 1

As a good start, read this SO question/answer.

Controllers:

The reason you shouldn't do DOM manipulation (or lookup of DOM elements, or making any assumptions about the View, for that matter) in the controller is because the intent of the controller is to deal only with the state of the app - by changing the ViewModel - irrespective of how the state is reflected in the View. This controller does that by reacting to events from the Model and from the View and setting properties of the ViewModel. Angular will deal with reflecting the "state" of the App in the View with bindings.

So, yes, of course, changing the ViewModel causes the View to react and DOM to be manipulated, but the idea is that the controller should not know or care about how exactly the View is reacting. This keeps the separation of concerns intact.

Directives:

When built-in directives are not enough and you require tighter control about how the View is reacting, this is a good reason to create a custom directive.

Two things to remember about directives.

1) It's useful to think of directives as re-usable components, so the less app-specific logic there is, the better. And definitely, avoid any business logic there. Define inputs and outputs (typically via attributes) and react only to those. Event listeners (like you have) are very app-specific (unless this directive is intended to be used with another directive that publishes an event), so better be avoided, 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 directives are "allowed to do DOM manipulations" doesn't mean that you should forget about the ViewModel-View separation. Angular allows you to define scope inside a link or a controller function, and provide a template with all the 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);    
}