1

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

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 回购

4

3 回答 3

1

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

您的控制器不需要“知道”服务或工厂何时更新以便在模板中使用它，因为 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;
});
于 2016-05-08T23:15:09.153 回答
0

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

于 2016-05-07T03:02:06.713 回答
0

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

良好实践

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

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

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

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

解决问题

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

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

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

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

之后它会自动更新和工作！希望这有帮助！

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

于 2016-05-07T03:26:10.647 回答