在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,没啥不好的。