javascript - uirouter 多个views共用controller问题

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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