加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:17:55 所属栏目:安全 来源:网络整理
导读:这是一个AngularJS应用程序.我有一个依赖于服务的自定义指令. 我真正好奇的是处理影响模型和DOM的用户操作的“角度方式”.一些示例代码: HTML: form foo-places !--other stuff -- span ng-repeat="place in places" button ng-click="removePlace(place)"
这是一个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的单个用户操作?

解决方法

当你处理AngularJS时,你可能听过“模型是真理的唯一来源”这句话.如果您理解这一部分,那么其余部分就很容易理解.这是“角度方式”.

当用户进行交互时 – 他没有与DOM或视图交互.他正在与模特互动.视图本身只是模型的“视图”.可能存在同一模型的其他视图 – 这就是为什么模型是真实的唯一来源.现在,允许您做什么角度是在用户交互时对模型进行更改.您进行了这些更改,并且因为模型已更改,视图的开始反映了模型的更改状态.

此外,只是为了强调关注点的分离 – 指令应该很少,直接处理服务.指令是DOM的一部分,这意味着它是视图的一部分.服务通常与业务逻辑有关或代表模型.在MVC或MVVM中,您不直接使View与模型交互.您始终使用ViewModel或Controller.这使依赖性保持最小.

您的ScrollToTop可以是您从控制器调用的服务(查看$anchorScroll这是Angular中的服务).它不是你想要的,但它是一个滚动服务,这也是你需要实现你的.

编辑:

为了澄清,你通常不会在服务中操作DOM.您可以在服务中考虑DOM操作内容的场景是,您尝试执行的操作不属于任何特定的html元素,而是需要在您的应用程序级别上执行的操作.

让我解释一下.例如,如果您尝试执行类似对话框/模态窗口的操作 – 在angularJS中,您会认为,这样的事情的理想位置是指令,因为它是通用UI组件.但是如果你考虑一下,AngularJS中的指令就是与元素相关的东西.您始终将指令与html元素相关联.但正如我们所看到的,对话框并不是你附加到元素上的东西,而是一种全局性的东西.这可能是个例外.

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读