如何在AngularJS多HTML页面间共享数据并实现控制器复用？

是否可以使用同一个控制器适配多页面？ #

完全可以。AngularJS的控制器可以绑定到任意多个页面，只需要根据当前路由的参数/路径判断页面场景，执行对应的初始化逻辑即可，后续新增客户创建页面也完全可以复用同一个控制器，不需要新建。

具体实现步骤： #

1. 合并两个控制器的逻辑到同一个CustomerController，根据$routeParams判断当前页面类型：

(function () {
    'use strict';
    angular.module("myMod")
        .controller("CustomerController", function ($routeParams, $location, customerResources, $scope) {
            var vm = this;
            // 通用客户空对象，编辑/新增场景共用
            vm.customer = {
                CustId: 0,
                Name: null
            };
            // 列表数据，列表场景用
            vm.logData = [];

            // 页面初始化入口
            init();
            
            function init() {
                // 路由带id参数：编辑页，加载对应客户数据
                if ($routeParams.id) {
                    getCustomer($routeParams.id);
                } 
                // 路由匹配列表页路径：加载客户列表
                else if ($location.path() === '/customers') {
                    getAllCustomers();
                }
                // 其他情况为新增页，直接用空的vm.customer即可
            }

            // 加载客户列表
            function getAllCustomers() {
                customerResources.getCustomers()
                    .then(function (response) {
                        vm.logData = response.data;
                    }, function (err) {
                        // 错误处理逻辑
                    });
            }

            // 加载单条客户数据
            function getCustomer(id) {
                // 修复你之前的参数传错问题：不要传初始为0的vm.customer.CustId，传路由拿到的id
                customerResources.getCustomer(id)
                    .then(function (data) {
                        vm.customer = data.data;
                    }, function (err) {
                        // 错误处理逻辑
                    });
            }

            // 通用保存方法，编辑/新增场景共用
            vm.saveCustomer = function () {
                if (vm.customer.CustId > 0) {
                    // 调用编辑更新接口
                } else {
                    // 调用新增客户接口
                }
            }
        });
})();

2. 所有相关页面统一绑定同一个控制器：

• 列表页：外层容器声明<div ng-controller="CustomerController as vm">，保留原有的列表渲染代码即可
• 编辑页：外层容器声明<div ng-controller="CustomerController as vm">，保留原有的表单代码即可
• 新增页：直接复用编辑页的表单代码，路由不需要带id参数，自动进入新增模式

更高复用性的可选方案：抽离公共逻辑到服务 #

如果你不希望单个控制器逻辑过于臃肿，更符合AngularJS最佳实践的方式是把所有客户相关的CRUD逻辑全部封装到customerResources服务中，后续新增页面只需要注入该服务调用对应方法即可，哪怕需要拆分多个控制器也不会重复写逻辑。

你之前代码无法加载数据的原因排查 #

你原有编辑控制器本身存在参数传错的问题：调用customerResources.getCustomer时传的是初始值为0的vm.customer.CustId，而不是路由拿到的id变量，所以无论如何都查不到对应客户数据，和是否共用控制器无关。另外列表页加ng-click无效是因为页面跳转后控制器会重新实例化，上一个页面的控制器状态不会保留，不需要加这个点击事件，保留你原有的ng-href带id跳转的逻辑即可。

内容的提问来源于stack exchange，提问作者Computer