共享变量和多个控制器 AngularJS

Question

我正在编写的一个小应用程序上有多个控制器，我已经像这样在控制器之间成功共享了一个 'selected' 变量。

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();
    }

}

我的主要内容区域有第三个控制器，这是我不知道该做什么的地方。我想显示来自 selected 员工的信息，但是 angular 在第一个员工有机会被设置为 selected 之前编译整个页面，随后 select员工的离子没有重新加载主要内容页面（因为我认为我没有告诉他们）。这是我的主要内容控制器：

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

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

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

我的问题是如何让一个控制器有效地更新其部分视图，以便当我 select 一名员工时它显示信息。

GitLab repo

Answer 1

因此，经过大量研究并得到 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 也必须包含在父控制器和广播控制器中。

Answer 2

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

良好做法

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

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

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

你看我把这个函数分开了，并且还把服务变成了一个实际的对象。我建议你像这样格式化你的控制器函数参数......如果你想 disuss/see 好的做法去here。 Anways 现在对真正的问题的良好做法已经足够了。

解决问题

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

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

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

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

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

PS: 不知道他已经回答了...

Answer 3

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

当服务或工厂更新后，您的控制器不需要 "know" 以便在模板中使用它，因为 Angular 会为您处理，因为您通过 点符号。这是您应该阅读更多内容的重要概念。

此 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;
});

共享变量和多个控制器 AngularJS

Shared variables and multiple controllers AngularJS

javascript

angularjs

angularjs-service

angularjs-controlleras

良好做法

解决问题