将Ang操作与Angular控制器分离-希望有最佳实践

一尘不染

将Ang操作与Angular控制器分离-希望有最佳实践

angularjs

试图找到构建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

阅读 305

2020-07-04

共1个答案

一尘不染

控制器：

您不应该在控制器中进行DOM操作（或查找DOM元素，或对View进行任何假设）的原因是，因为控制器的意图是仅处理应用程序的状态-通过更改ViewModel-
无论状态如何在View中反映。该控制器通过对来自Model和View的事件做出反应并设置ViewModel的属性来实现。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);    
}

2020-07-04