javascript - uirouter 多个views共用controller问题
PHPz
PHPz 2017-04-11 11:05:11
0
7
857


在uirouter配置中配置了几个view,这几个view只是当前页面的部分,所以想要他们共享同一个controller,但是如果是每个view都写相同的controller,那controller里面的东西就会执行很多次。
如何让多个view直接共用一个controller而不用重复执行?

PHPz
PHPz

学习是最好的投资!

reply all(7)
大家讲道理

如果不涉及到数据预加载的话,试试resolve吧,在路由里resolve一个标识,然后在controller中判断并执行对应的逻辑。

Peter_Zhu

还是建议你使用多个controller,你这样写的话首先不符合angular的一个controller控制一个view的设计思想,而且不利于以后的维护和升级,推荐你看看这个angular-styleguide。

Peter_Zhu

建议是给每个view都写一个controller,如果有公共的部分想要共享的话,可以尝试使用"abstract:true",配置虚拟路由,把可以公用的逻辑写到这个路由下的controller里面。

PHPzhong

如果是model共用 可以用flux-angular

黄舟

谢谢邀请,这个uirouter我没接触过不了解。我去百度了一下,你看看这个对你有帮助吗(uirouter)[http://www.tuicool.com/articles/zeiy6ff]

黄舟

可以使用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的方式通讯,这样既保证了页面组建的独立性,方便复用,降低耦合度,又具有很方便的通讯方式,保证程序的稳定性。

PHPzhong


最后还是为每一个view写一个ctrl,没啥不好的。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template