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


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

PHPz
PHPz

学习是最好的投资!

reply all(7)
黄舟

可以使用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的代码:

分享达人更多


  • {{gm.userName}}

    本周共分享{{gm.weekShare}}条
    本周供学习{{gm.weekLearn}}条
    职位:{{gm.userZhiwei}}

在主页面就可以这样屌用:

这是我之前项目里的代码,没有涉及到商业保密内容,就贴上来了,你可以看到,最后一段主页面的代码量很少,就是因为全部采用了指令的方式去写,每一个指令的controller有自己的作用域,不会相互干扰。
controller之间可以使用rootscope或者on/emit的方式通讯,这样既保证了页面组建的独立性,方便复用,降低耦合度,又具有很方便的通讯方式,保证程序的稳定性。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!