AngularJS：当用户操作同时影响模型和 DOM 时

Question

这是一个 AngularJS 应用程序。我有一个依赖于服务的自定义指令。

我真正好奇的是处理影响模型和 DOM 的用户操作的“角度方式”。一些示例代码：

HTML：

<form foo-places>
    <!--other stuff -->
    <span ng-repeat="place in places">
        <button ng-click="removePlace(place)">remove {{place}}</button>
    </span>        
</form>

JS：

angular.module('foo.directives', []).directive('fooPlaces', 
function(placesService) {
    return {
        controller : function($scope) {
            $scope.places = placesService.places;
                    $scope.removePlace = function(name) {
                placesService.removePlace(name);
            };
            $scope.$on('placesChanged', function() {
                $scope.places = placesService.places;
            });
        },
        link : function($scope, element, attrs) {
                //code to do stuff when user removes a place
        }
    }
})

当用户删除一个地方（通过点击一个按钮）时，我还需要做一些事情来弄乱 DOM，例如，将窗口滚动到顶部等。在控制器中有一个功能感觉很奇怪处理模型，然后处理 DOM 的指令中的另一个函数......但两者都基于相同的用户操作。

我是在想这件事还是真的错过了什么？我应该如何处理同时处理模型和 DOM 的单个用户操作？

Answer 1

在处理 AngularJS 时，您可能听说过“模型是事实的单一来源”这句话。如果你理解了这部分，那么剩下的事情就很容易到位了。这就是“Angular 方式”。

当用户交互时 - 他没有与 DOM 或视图交互。他正在与模型互动。视图本身只是模型的“视图”。同一模型可能有其他视图——这就是为什么该模型是唯一的事实来源。现在，Angular 允许您做的是在用户交互时对模型进行更改。您进行了这些更改，并且由于模型已更改，因此视图开始反映模型的更改状态。

另外，只是为了强调关注点的分离——指令很少应该直接处理服务。指令是 DOM 的一部分，这意味着它是视图的一部分。服务通常与业务逻辑有关或表示模型。在 MVC 或 MVVM 中，您不会直接使视图与模型交互。您总是在两者之间使用 ViewModel 或 Controller。这将依赖关系降至最低。

您的 ScrollToTop 可能是您从控制器调用的服务（查看 $anchorScroll，它是 Angular 中的服务）。它不会做你想做的事，但它是一个滚动服务，这也是你需要实现的。

编辑：

为了澄清，您通常不会在服务中进行 DOM 操作。您可以在服务中考虑 DOM 操作的场景是，您尝试做的事情不属于任何特定的 html 元素，而是需要在您的应用程序级别发生的事情。

让我解释一下。例如，如果你试图做一个对话框/模态窗口之类的事情——在 angularJS 中，你会认为，这样的事情的理想位置是指令，因为它是一个通用的 UI 组件。但是如果你仔细想想，AngularJS 中的指令就是与元素相关联的东西。您总是将指令与 html 元素相关联。但正如我们所见，对话框不是附加到元素上的东西，而是本质上是全局的东西。这大概是个例外。

这同样适用于一些$window 和$document 相关的东西（例如滚动）。这些不属于任何特定元素（如果你想在 div 内滚动，它应该是一个指令），因此它们需要是一个服务。此外，这是一项您可能会注入指令的服务。说每次触发你的指令时你想滚动到顶部或打开一个对话框。您可以将这些服务注入您的指令中。您可能不应该注入指令的服务类型是与业务逻辑相关联的服务。将指令视为可重用的 UI 组件。

当然，您可以创建一个更高级别的组件（您正在尝试的东西）来创建一个 DSL，但是您需要确切地知道您在做什么。在那之前，我建议你坚持使用普通的旧控制器、指令和服务，并且每个都管理自己的问题。