javascript - 将 DOM 操作与 Angular Controller 分离——需要最佳实践

Question

为了寻找构建 Angular 应用程序的“最佳”方式，我找到了几篇最佳实践文章。有了这个输入，我这样做了:

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

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

谢谢，雷纳

Answer 1

作为一个好的开始，请阅读此 SO question/answer .

Controller :

您不应该在 Controller 中进行 DOM 操作(或查找 DOM 元素，或对 View 做出任何假设)的原因是， Controller 的目的是仅处理app - 通过更改 ViewModel - 无论状态如何反射(reflect)在 View 中。该 Controller 通过对来自模型和 View 的事件使用react并设置 ViewModel 的属性来实现这一点。 Angular 将通过绑定(bind)处理在 View 中反射(reflect)应用程序的“状态”。

所以，是的，当然，更改 ViewModel 会导致 View 使用react并操纵 DOM，但想法是 Controller 不应该知道或关心 View 的 react 到底如何。这使关注点分离保持不变。

指令:

当内置指令不够用并且您需要更严格地控​​制 View 的 react 时，这是创建自定义指令的好理由。

关于指令需要记住两点。

1) 将指令视为可重复使用的组件很有用，因此特定于应用程序的逻辑越少越好。当然，避免那里有任何业务逻辑。定义输入和输出(通常通过属性)并仅对它们使用react。事件监听器(就像你有的)是非常特定于应用程序的(除非该指令旨在与另一个发布事件的指令一起使用)，因此最好尽可能避免。

.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 允许您在链接或 Controller 函数内定义范围，并提供包含所有典型 Angular 表达式和绑定(bind)的模板。

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