将 DOM 操作与 Angular 控制器分开 - 需要最佳实践 [英] Separating DOM manipulation from Angular controllers - Best Practice wanted

问题描述

试图找到构建 Angular 应用程序的最佳"方式，我找到了几篇最佳实践文章.有了这个输入，我做到了:

angular.module('xApp', [])//..... 一些服务、工厂、控制器，.....directive('dirNotification',[ function dirNotification() {返回 {范围: {}，templateUrl: 'xNotification.html',替换:真的，控制器:'CtrlNotification'，链接:函数($scope){//如果这是 'DOM 操作，应该在这里完成 ... ?/*$scope.$on('session.update',function(event, args) {如果(参数==空){$scope.notificationdata.username = "";$scope.notificationdata.sid = "";} 别的 {$scope.notificationdata.username = args.username;$scope.notificationdata.sid = args.accessToken;}});*/}};}]).controller('CtrlNotification',['$scope' ,function CtrlNotification($scope) {$scope.notificationdata = {用户名: ""，西德:"};//这不是真正的DOM操作，只是视图数据操作?$scope.$on('session.update',function(event, args) {如果(参数==空){$scope.notificationdata.username = "";$scope.notificationdata.sid = "";} 别的 {$scope.notificationdata.username = args.username;$scope.notificationdata.sid = args.accessToken;}});}])

HTML 模板很简单:

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

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

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

谢谢，雷纳

解决方案

作为一个好的开始，阅读这篇 ​​SO 问题/答案.

控制器:

您不应该在控制器中进行 DOM 操作(或查找 DOM 元素，或对视图做出任何假设)的原因是因为控制器的意图是仅处理状态app - 通过更改 ViewModel - 无论状态如何反映在视图中.该控制器通过对来自模型和视图的事件做出反应并设置 ViewModel 的属性来实现这一点.Angular 将通过绑定处理在视图中反映应用程序的状态".

所以，是的，当然，更改 ViewModel 会导致 View 做出反应并操作 DOM，但其想法是控制器不应该知道或关心 View 的具体反应.这样可以保持关注点分离的完整性.

指令:

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

关于指令需要记住的两件事.

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

.directive("通知", function(){返回 {限制:A"，范围: {通知:="//让属性获取通知的数据，而不是//使用 scope.$on 监听器},//...}})

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

template: '<div ng-show="showNotification">username:{{notification.username}}</div>',//控制器也可以在这里使用链接:功能(范围，元素，属性){scope.showNotification = Math.floor(Math.random()* 2);}

Trying to find the "best" way building an Angular App I found several best practice articles. With this input I did this:

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

}])

The HTML template is simply this:

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

So my question is, should data changes to be considered as DOM manipulation? The present version doing this within the controller seems more practical to me (e.g. setting default values). Also if I add more functionality to that, the "directive link" block will grow and contain more functions than definitions. I guess within the directive things like changing colors or hiding elements depending on the scope data should be done there.

What does the community mean? Do you agree with my assumptions?

Thanks, Rainer

解决方案

As a good start, read this SO question/answer.

Controllers:

The reason you shouldn't do DOM manipulation (or lookup of DOM elements, or making any assumptions about the View, for that matter) in the controller is because the intent of the controller is to deal only with the state of the app - by changing the ViewModel - irrespective of how the state is reflected in the View. This controller does that by reacting to events from the Model and from the View and setting properties of the ViewModel. Angular will deal with reflecting the "state" of the App in the View with bindings.

So, yes, of course, changing the ViewModel causes the View to react and DOM to be manipulated, but the idea is that the controller should not know or care about how exactly the View is reacting. This keeps the separation of concerns intact.

Directives:

When built-in directives are not enough and you require tighter control about how the View is reacting, this is a good reason to create a custom directive.

Two things to remember about directives.

1) It's useful to think of directives as re-usable components, so the less app-specific logic there is, the better. And definitely, avoid any business logic there. Define inputs and outputs (typically via attributes) and react only to those. Event listeners (like you have) are very app-specific (unless this directive is intended to be used with another directive that publishes an event), so better be avoided, if possible.

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

2) Just because directives are "allowed to do DOM manipulations" doesn't mean that you should forget about the ViewModel-View separation. Angular allows you to define scope inside a link or a controller function, and provide a template with all the typical Angular expressions and bindings.

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 控制器分开 - 需要最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！