將DOM操作與Angular控制器分開 - 需要最佳實踐

Question

試圖找到構建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

Answer 1

作為一個良好的開端，請閱讀這個問題/答案 。

控制器：

你不應該在控制器中進行DOM操作（或查找DOM元素，或對視圖做出任何假設）的原因是因為控制器的意圖只是處理應用程序的狀態 - 通過更改ViewModel - 無論狀態如何在View中反映出來。 此控制器通過響應模型中的事件以及ViewModel的View和設置屬性來實現此目的。 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);    
}