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

}

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

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会为您处理此问题，因为您通过点符号访问数据。这是您应该阅读的重要概念。

这个小提琴显示了访问数据的两种方式，以及如何在模板中使用容器对象使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

经过大量研究和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 3

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

良好做法

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

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

你看到那里我单独放置了这个函数，并且还使服务成为一个实际的对象..我建议你像这样格式化你的控制器函数参数...如果你想讨论/看到好的做法去{{3} }。现在已经足够了解现实中的良好做法。

解决问题

好的安德鲁实际上想出了这个!!问题是：他需要使用$ rootScope广播他的消息：

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

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

id="main-contact-form"

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

PS：不知道他已经说过了......

共享变量和多个控制器AngularJS

3 个答案:

良好做法

解决问题