84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
在uirouter配置中配置了几个view,这几个view只是当前页面的部分,所以想要他们共享同一个controller,但是如果是每个view都写相同的controller,那controller里面的东西就会执行很多次。如何让多个view直接共用一个controller而不用重复执行?
学习是最好的投资!
如果不涉及到数据预加载的话,试试resolve吧,在路由里resolve一个标识,然后在controller中判断并执行对应的逻辑。
还是建议你使用多个controller,你这样写的话首先不符合angular的一个controller控制一个view的设计思想,而且不利于以后的维护和升级,推荐你看看这个angular-styleguide。
controller
angular
view
建议是给每个view都写一个controller,如果有公共的部分想要共享的话,可以尝试使用"abstract:true",配置虚拟路由,把可以公用的逻辑写到这个路由下的controller里面。
如果是model共用 可以用flux-angular
谢谢邀请,这个uirouter我没接触过不了解。我去百度了一下,你看看这个对你有帮助吗(uirouter)[http://www.tuicool.com/articles/zeiy6ff]
uirouter
可以使用angularjs的指令(directive)方式去实现。每一个directive有自己的view模版和自己的service,然后在directive里面写自己那一部分的controller逻辑,如下图:
下面是一个指令的代码示例:
(function() { 'use strict'; angular .module('teambookWww') .directive('companyGoodMembers', companyGoodMembers); /** @ngInject */ function companyGoodMembers() { var directive = { restrict: 'E', templateUrl: 'app/company/companyGoodMembers/company_goodmembers.html', scope: {}, controller: CompanyGoodMembersController, controllerAs: 'vm', bindToController: true, replace : true }; return directive; /** @ngInject */ function CompanyGoodMembersController($location,companygoodmembers) { var vm = this; var companyId = $location.search().companyId; vm.companyGoodMembers = []; getCompanyGoodMembers(companyId); function getCompanyGoodMembers(companyId) { return companygoodmembers.getCompanyGoodMembers(companyId) .then(function(res){ vm.companyGoodMembers = res; }) .catch(); } } } })();
下面是响应的service的示例代码:
(function () { 'use strict'; angular .module('teambookWww') .service('companygoodmembers', CompanyGoodMembers); /** @ngInject */ function CompanyGoodMembers($http,$log,teambookConfig) { this.getCompanyGoodMembers = getCompanyGoodMembers; function getCompanyGoodMembers(companyId) { var response = { "size" : 3, "info" : "goodmembers", "data" : [ { "userLogo" : "./assets/images/user2.png" , "userName" : "用户一", "userZhiwei" : "技术部 研发总监", "weekShare" : 6 , "weekLearn" : 13 }, { "userLogo" : "./assets/images/user4.png" , "userName" : "用户二", "userZhiwei" : "技术部 研发总监", "weekShare" : 6 , "weekLearn" : 13 }, { "userLogo" : "./assets/images/user5.png" , "userName" : "用户三", "userZhiwei" : "技术部 研发总监", "weekShare" : 6 , "weekLearn" : 13 } ] }; //var apiHost = teambookConfig.apiHost; //return $http.get(apiHost + '/aip/members?id='+companyId+'&sort=level') // .then(getCompanyGoodMembersComplete) // .catch(getCompanyGoodMembersFailed); // // function getCompanyGoodMembersComplete(response) { return response.data; // } // // function getCompanyGoodMembersFailed(error) { // $log.error('XHR Failed for getCompanyGoodMembers.\n' + angular.toJson(error.data, true)); // } } } })();
下面是指令模版html的代码:
<p class="good-member"> <p class="gm-title"> <h4>分享达人<span><a href="#">更多</a></span></h4> <hr/> </p> <p class="gm-list"> <ul> <li ng-repeat="gm in vm.companyGoodMembers"> <p class="gm-info"> <img src="{{gm.userLogo}}" alt=""/> <h5>{{gm.userName}}</h5> </p> <p class="gm-data"> <h6>本周共分享{{gm.weekShare}}条</h6> <h6>本周供学习{{gm.weekLearn}}条</h6> <h6>职位:{{gm.userZhiwei}}</h6> </p> </li> </ul> </p> <p class="clear-fix"></p> </p>
在主页面就可以这样屌用:
<p class="container-fluid"> <p class="row"> <acme-navbar creation-date="company.creationDate"></acme-navbar> </p> <p class="row"> <p class="main"> <company-info></company-info> </p> </p> <p class="row"> <p class="main"> <p class="side-bar"> <company-data></company-data> <company-cur-visitors></company-cur-visitors> <company-good-members></company-good-members>//注意,这里就是上面示例代码中定义的directive </p> <p class="content"> <company-shares></company-shares> </p> </p> </p> <p class="row"> <footer></footer> </p> </p>
这是我之前项目里的代码,没有涉及到商业保密内容,就贴上来了,你可以看到,最后一段主页面的代码量很少,就是因为全部采用了指令的方式去写,每一个指令的controller有自己的作用域,不会相互干扰。controller之间可以使用rootscope或者on/emit的方式通讯,这样既保证了页面组建的独立性,方便复用,降低耦合度,又具有很方便的通讯方式,保证程序的稳定性。
最后还是为每一个view写一个ctrl,没啥不好的。
如果不涉及到数据预加载的话,试试resolve吧,在路由里resolve一个标识,然后在controller中判断并执行对应的逻辑。
还是建议你使用多个
controller
,你这样写的话首先不符合angular
的一个controller
控制一个view
的设计思想,而且不利于以后的维护和升级,推荐你看看这个angular-styleguide。建议是给每个view都写一个controller,如果有公共的部分想要共享的话,可以尝试使用"abstract:true",配置虚拟路由,把可以公用的逻辑写到这个路由下的controller里面。
如果是model共用 可以用flux-angular
谢谢邀请,这个
uirouter
我没接触过不了解。我去百度了一下,你看看这个对你有帮助吗(uirouter)[http://www.tuicool.com/articles/zeiy6ff]可以使用angularjs的指令(directive)方式去实现。每一个directive有自己的view模版和自己的service,然后在directive里面写自己那一部分的controller逻辑,如下图:
下面是一个指令的代码示例:
下面是响应的service的示例代码:
下面是指令模版html的代码:
在主页面就可以这样屌用:
这是我之前项目里的代码,没有涉及到商业保密内容,就贴上来了,你可以看到,最后一段主页面的代码量很少,就是因为全部采用了指令的方式去写,每一个指令的controller有自己的作用域,不会相互干扰。
controller之间可以使用rootscope或者on/emit的方式通讯,这样既保证了页面组建的独立性,方便复用,降低耦合度,又具有很方便的通讯方式,保证程序的稳定性。
最后还是为每一个view写一个ctrl,没啥不好的。