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

Separating DOM manipulation from Angular controllers - Best Practice wanted

本文关键字：最佳 分离 操作 DOM Angular 控制器      更新时间：2023-09-26

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

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

谢谢雷纳

作为一个好的开始，请阅读这个SO问题/答案。

控制器：

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

所以，是的，当然，更改 ViewModel 会导致视图做出反应，DOM 会纵，但这个想法是控制器不应该知道或关心视图的确切反应方式。这样可以保持关注点的分离不变。

指令：

当内置指令不够用并且您需要更严格地控制视图的反应时，这是创建自定义指令的一个很好的理由。

关于指令要记住的两件事。

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);    
}
相关文章：