共享控制器上跨部分视图的操作未触发

Question

我有几段可重用的代码要分开。我遇到的问题是两个直接相关但位于页面的不同部分，我希望它们位于单独的局部视图中，所以我有两个共享相同 angular 控制器的局部视图。

Html: 局部视图 1：

<div ng-controller="CustomerController" data-ng-init="init()">
<div class="col-md-2 col-md-offset-5" style="outline: 1px solid black; margin-top: 1%">
    <div class="text-center">
        <div class="radio-inline" ng-repeat="customerOption in customerOptions">
            <input type="radio" id="{{customerOption.Value}}" name="customer" ng-change="getCustomers(customerType)" ng-model="customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
        </div>
    </div>
</div>

局部视图 2：

<div ng-controller="CustomerController" data-ng-init="init()" class="col-md-2">
<select ng-model="customerKey" ng-options="customer.Key as customer.Value for customer in customers"></select>

</div>

angular 控制器：

var customer = angular.module('customer', []);

 customer.controller('CustomerController', [
"$scope", "customerService",
function ($scope, customerService) {
    $scope.customerOptions = CustomerOptions;

    $scope.getCustomers = function (customerType) {
        $scope.showContent = false;
        if (customerType == "1") {
            customerService.getProduction().then(function (result) { $scope.customers = result.data; });
        } else if (customerType == "2") {
            customerService.getTest().then(function (result) { $scope.customers = result.data; });
        } else {
            customerService.getAll().then(function (result) { $scope.customers = result.data; });
        }
    };

    $scope.init = function() {
        $scope.getCustomers("3");
    }
}
])

当我更改部分视图 1 上的单选按钮时，它会触发 getCustomer() 方法，但不会将列表更改为更新后的列表。

我错过了什么？

Answer 1

您的控制器正在创建彼此的两个独立实例，因此它们彼此不了解。您可以：

使用服务/工厂在控制器之间保存数据，或者，

将父控制器放在两个部分的容器元素上，以便它们都可以访问同一个控制器。

共享控制器上跨部分视图的操作未触发

Actions across partial views on a shared controller not firing

single-responsibility-principle

angularjs