我真正好奇的是处理影响模型和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的单个用户操作？
解决方法
当用户进行交互时 – 他没有与DOM或视图交互.他正在与模特互动.视图本身只是模型的“视图”.可能存在同一模型的其他视图 – 这就是为什么模型是真实的唯一来源.现在,允许您做什么角度是在用户交互时对模型进行更改.您进行了这些更改,并且因为模型已更改,视图的开始反映了模型的更改状态.
此外,只是为了强调关注点的分离 – 指令应该很少,直接处理服务.指令是DOM的一部分,这意味着它是视图的一部分.服务通常与业务逻辑有关或代表模型.在MVC或MVVM中,您不直接使View与模型交互.您始终使用viewmodel或Controller.这使依赖性保持最小.
您的ScrollToTop可以是您从控制器调用的服务(查看$anchorScroll这是Angular中的服务).它不是你想要的,但它是一个滚动服务,这也是你需要实现你的.
编辑：
为了澄清,你通常不会在服务中操作DOM.您可以在服务中考虑DOM操作内容的场景是,您尝试执行的操作不属于任何特定的html元素,而是需要在您的应用程序级别上执行的操作.
让我解释一下.例如,如果您尝试执行类似对话框/模态窗口的操作 – 在angularJS中,您会认为,这样的事情的理想位置是指令,因为它是通用UI组件.但是如果你考虑一下,AngularJS中的指令就是与元素相关的东西.您始终将指令与html元素相关联.但正如我们所看到的,对话框并不是你附加到元素上的东西,而是一种全局性的东西.这可能是个例外.
同样也适用于某些$window和$document相关的东西(例如滚动).这些不属于任何特定元素(如果你想在div中滚动,它应该是一个指令),因此它们需要是一个服务.此外,这是您可能注入指令的服务.假设每次触发您的指令时,您想要scrollToTop或打开一个对话框.您可以将这些服务注入您的指令中.您可能不应该注入指令的服务类型是与业务逻辑关联的服务.将指令视为可重用的UI组件.
当然,你可以创建一个更高级别的组件(你正在尝试的东西)来创建一个DSL,但是你需要确切知道你在做什么.在那之前,我建议你坚持使用普通的旧控制器,指令和服务,并且每个人都要管理自己的问题.
