微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

何时使用嵌套控制器而不是在angularjs中使用服务?

我刚刚开始使用AngularJS,所以我不是专家.

我有一个div代表我的html视图的正确区域.在那个div我有一个控制器,即

<div class="rightContainer" ng-controller="rightContainerCtrl">...</div>

在那个div里面我有一个表,一个搜索区域等.那个div里的每个区域都有自己的控制器,它看起来像这样:

<div class="rightContainer" ng-controller="rightContainerCtrl">
...
   <div class="search" ng-controller="searchCtrl">...</div>
...
   <div class="table" ng-controller="tableCtrl">...</div>

 </div>

例如,搜索区域有自己的控制器,它是rightContainerCtrl的一个小孩,因为它需要改变父(rightContainerCtrl)中的一些内容,但是rightContainer div正在增长,现在它很大,并且包含几个嵌套的控制器.

我认为使用这个嵌套控制器在这种情况下是不好的,因为所有的嵌套控制器共享父范围,并不是所有的控制器都需要访问所有的父范围变量,所有的控制器都是rightContainerCtrl的“囚犯”,所以他们是与他们的母公司高度配合.

它看起来像一个God object反模式(在这种情况下是上帝控制器),所以我认为,而不是使用嵌套的控制器,我可以重构我的代码,以消除rightContainerCtrl控制器,并使用一个服务(像facade design pattern),那个服务将由控制器使用,而不是共享作用域变量.

但由于我不是AngularJs专家,我不知道我是对的,或者如果最好离开这位父母的控制人,也许我错过了一些事情,所以我的问题是

什么时候更好地使用嵌套的控制器(嵌套范围),而最好是在angularjs中使用服务?

控制器/范围层次结构不应该规定数据/模型在应用程序中的共享方式.当您想到Angular中的数据共享时,请考虑依赖注入.

在@ shaunhusain的回答中引用的视频中,Misko声明范围应该引用模型,而不是模型 – 所以不要将数据建模/放置到范围内.您的型号/数据通常应在服务中.

在写一个Angular应用程序时,首先考虑一下你的模型.将它们放在services with APIs中以获取/编辑/操纵模型.然后设计你的意见.每个视图都应该投射/使用/操纵你的模型的一些子集.为每个视图定义一个控制器,只需将所需的模型子集粘贴到视图中即可.使您的控制器尽可能薄.

(也不推荐命名一个控制器rightContainerCtrl.控制器不应该知道演示/布局.)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档读起来特别费力,基础差、底子薄的有可能一会就会被绕晕了,最起码英文文档中的代码与中文文档中的代码是一致的,但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB。   其中用到的软件:   Chart.js框架,版本1.0.2,一
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示: 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;
Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》,如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
HTML:让表单、文本框只读,不可编辑的方法有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使中国">的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中,移动端新近增加了一个功能“微信授权登录”,由于自己不是负责移动端开发的,但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作,谁让自己是负责人呢?原来负责人就是负责最后把所有的BUG解决掉。 首先,熟悉一下微信授权部分的源代码,如下所示:
AngularJS实现二维码信息的集成思路需求 实现生成的二维码包含订单详情信息。思路获取的内容数据如下: 现在可以获取到第一级数据,第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。for(i in data){alert(i); //获得属性 if(typeof(data[i]) == "o
Cookie'data'possiblynotsetoroverflowedbecauseitwastoolarge(5287>4096bytes)!故事起源 项目开发过程中遇到以上问题,刚开始以为只是个警告,没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。问题分析 根据Chrome浏览器信息定位,显示以下代码存在错误: