将DOM操作与Angular控制器分开 - 需要最佳实践

Question

试图找到构建Angular App的"最佳"方法我找到了几篇最佳实践文章.有了这个输入,我做了这个:

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

}])

HTML模板就是这样的:

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

所以我的问题是,数据更改是否应被视为DOM操作？在控制器中执行此操作的当前版本对我来说似乎更实用(例如,设置默认值).此外,如果我添加更多功能,"指令链接"块将增长并包含比定义更多的功能.我想在指令中应该在那里根据范围数据更改颜色或隐藏元素.

社区是什么意思？你同意我的假设吗？

谢谢,Rainer

Answer 1

作为一个良好的开端,请阅读这个问题/答案.

控制器:

你不应该在控制器中进行DOM操作(或查找DOM元素,或对视图做出任何假设)的原因是因为控制器的意图只是处理应用程序的状态 - 通过更改ViewModel - 无论状态如何在View中反映出来.此控制器通过响应模型中的事件以及ViewModel的View和设置属性来实现此目的.Angular将通过绑定来反映视图中应用程序的"状态".

所以,是的,当然,更改ViewModel会导致View做出反应并操纵DOM,但想法是控制器不应该知道或关心View的反应.这使问题的分离保持完整.

指令:

当内置指令是不够的,你需要了解更严格的控制如何查看正在反应,这是一个很好的理由来创建自定义指令.

关于指令要记住两件事.

1)将指令视为可重用的组件是有用的,因此特定于应用程序的逻辑越少越好.当然,避免任何业务逻辑.定义输入和输出(通常通过属性)并仅对那些做出反应.事件监听器(与您一样)是非常特定于应用程序的(除非该指令旨在与另一个发布事件的指令一起使用),因此如果可能,最好避免使用.

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

2)仅仅因为指令"允许进行DOM操作"并不意味着你应该忘记ViewModel-View分离.Angular允许您在链接或控制器函数内定义范围,并提供包含所有典型Angular表达式和绑定的模板.

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