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

Question

试图找到构建 Angular 应用程序的 "best" 方法，我发现了几篇最佳实践文章。有了这个输入，我这样做了：

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 操纵？在控制器中执行此操作的当前版本对我来说似乎更实用（例如设置默认值）。此外，如果我向其添加更多功能，"directive link" 块将增长并包含比定义更多的功能。我想在指令中应该根据范围数据更改颜色或隐藏元素之类的事情应该在那里完成。

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

谢谢，莱纳

Answer 1

作为一个好的开始，请阅读这篇文章 SO question/answer。

控制器：

你不应该在控制器中进行 DOM 操作（或查找 DOM 元素，或对视图做出任何假设）的原因是控制器只处理应用程序的状态 - 通过更改 ViewModel - 而不管状态如何反映在视图中。该控制器通过对来自模型和视图的事件做出反应并设置 ViewModel 的属性来实现这一点。 Angular 将处理在具有绑定的视图中反映应用程序的 "state"。

所以，是的，当然，更改 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) 仅仅因为指令是 "allowed to do DOM manipulations" 并不意味着您应该忘记 ViewModel-View 分离。 Angular 允许您在 link 或控制器函数内定义范围，并提供包含所有典型 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);    
}

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

Separating DOM manipulation from Angular controllers - Best Practice wanted

javascript

angularjs

angularjs-directive