共享变量和多个控制器 AngularJS

Question

我正在编写的一个小应用程序上有多个控制器，并且我已经成功地在控制器之间共享了一个“选定”变量，就像这样。

app.service('selectedEmployee', function () {
    var selected = null;

    return 
    { 
        getSelected: function() {
            return selected;
        },
        postSelected: function(employee) {
            selected = employee;
        }
    };

});

我有一个带有员工列表的侧导航栏。当我点击一个员工时，我调用 postSelected 函数，然后调用 getSelected 来设置 $scope.selected。

$scope.selectEmployee = function(employee) {

   //Calling Service function postSelected
    selectedEmployee.postSelected(employee);

    $scope.selected = selectedEmployee.getSelected();

    if ($mdSidenav('left').isOpen()) {
        $mdSidenav('left').close();
    }

}

我的主要内容区域有第三个控制器，这就是我不知道该怎么做的地方。我希望显示来自所选员工的信息，但 Angular 在第一个员工有机会被设置为选中之前编译整个页面，并且员工的后续选择不会重新加载主要内容页面（因为我没有我想告诉他们）。这是我的主要内容控制器：

app.controller('mainContentController', ['$scope','selectedEmployee',
    function ($scope, selectedEmployee) {
        $scope.selected = selectedEmployee.getSelected();
        console.log($scope.selected);
    }
]);

我现在的主要内容视图非常简单

<h2>{{selected.firstName}}{{selected.lastName}}</h2>

我的问题是如何告诉控制器有效地更新其局部视图，以便在我选择员工时显示信息。

GitLab repo

Answer 1

如果您的目标只是显示和修改控制器模板中的数据，请不要依赖杂乱无章的广播。

您的控制器不需要“知道”服务或工厂何时更新以便在模板中使用它，因为 Angular 会为您处理这个，因为您通过 dot notation 访问数据.这是您应该详细了解的重要概念。

这个 Fiddle 展示了访问数据的两种方式，以及在模板中使用容器对象如何导致 Angular 在更改时重新检查相同的实际对象 - 而不是存储在控制器中的原始字符串值：

http://jsfiddle.net/a01f39Lw/2/

模板：

<div ng-controller="Ctrl1 as c1">
    <input ng-model="c1.Bands.favorite" placeholder="Favorite band?">
</div>
<div ng-controller="Ctrl2 as c2">
    <input ng-model="c2.Bands.favorite" placeholder="Favorite band?">
</div>

JS：

var app = angular.module("app", []);      

app.factory('Bands', function($http) {
    return {
        favorite: ''
    };    
});

app.controller('Ctrl1', function Ctrl1(Bands){
    this.Bands = Bands;
});
app.controller('Ctrl2', function Ctrl2(Bands){
    this.Bands = Bands;
});

Answer 2

首先让我们从良好实践开始，然后在这里解决您的问题...

良好做法

至少据我所知，我不打算像你那样使用服务……你看，服务更像是对象。因此，如果我要将您的服务转换为我通常使用的方式，则会产生以下结果：

app.service('selectedEmployee', [selectedEmployeeService])

    function selectedEmployeeService(){
      this.selected = null;
      this.getSelected = function(){
        return this.selected;
      }
      this.postSelected = function(emp){
        this.selected = emp;
      }
    }

你看我把函数分开了，并且把服务变成了一个实际的对象。我建议你像这样格式化你的控制器函数参数…如果你想讨论/查看好的做法去here。无论如何，关于真正问题的良好实践已经足够了。

解决问题

好吧，安德鲁真的想通了！！问题是：他需要使用 $rootScope 广播他的消息：

$rootScope.$broadcast('selected:updated', $scope.selected);

然后你必须检查 $scope.selected 何时更新......有点像 $scope.$watch...

$scope.$on('selected:updated', function(event, data) {
          $scope.selected = data;
})

之后它会自动更新并运行！希望这有帮助！

PS：不知道他已经回答了……

Answer 3

因此，经过大量研究和来自 Dsafds 的大量帮助后，我能够使用 $rootScope.$broadcast 通知我对变量更改的部分视图。

如果您从 rootScope 广播，它将到达每个子控制器，并且您不必在服务变量上设置 $watch。

$scope.selectEmployee = function(employee) {
            selectedEmployee.postSelected(employee);
            $scope.selected = selectedEmployee.getSelected();
            $rootScope.$broadcast('selected:updated', $scope.selected);
            if ($mdSidenav('left').isOpen()) {
                $mdSidenav('left').close();
            }
        }

并且在主内容区的控制器中

function ($scope) {
    $scope.$on('selected:updated', function(event, data) {
        $scope.selected = data;
    })
}

我认为您不必直接传递数据，您也可以轻松调用 selectedEmployee.getSelected()

$rootScope 也必须包含在父控制器和广播控制器中。