javascript - AngularJS 一个地方的范围改变应该在另一个地方改变，这如何实现？

Question

描述:

我有一个模式，用户可以在其中查看他们的个人资料照片并上传新照片。此个人资料图片也会显示在导航中(在他们的名字旁边)。

当前流程如下:

1. 用户进入模式
2. 用户没有照片，显示默认头像。用户这样做，显示他们的
3. 用户上传新照片，HTTP 响应返回 src 属性
4. Controller 更新范围并将 $scope.photo 设置为等于响应

现在这工作得很好，正如它应该的那样。但是，我在侧面导航的布局 View 中也有个人资料照片，该照片由另一个 Controller 控制。

范围变量具有相同的名称和 HTML 相同，并且它们由相同的服务设置。但是，范围是从不同的 Controller 设置的。

这是模态 Controller 的代码:

Files.profile_photo()
    .success(function(data) {
        $scope.photo = data;
    })

$scope.onFileSelect = function($files) {
    var path = $scope.file_name;
    console.log(path);

    for(var i = 0; i < $files.length; i++) {
        var file = $files[i];

        $scope.upload = $upload.upload({
            url: '/smart2/api/files/profile',
            file: file
        }).success(function(data) {
            $scope.photo = data;
        });
    }
}

然后在我的侧面导航 Controller 中，照片也需要更新，我调用服务 Files 和函数 profile_photo 并执行完全相同的操作在页面加载时设置照片。

当模态发生更改时，我如何才能更新它？我无法执行 $scope.onFileSelect 因为它位于另一个 Controller 内部的模式中。

我需要以某种方式通知 Angular 照片已更改，并在另一个 Controller 中更新它。

我有什么选择？

Answer 1

也许您可以通过广播照片更改的事件来处理此问题。我会将照片存储在服务中，而不是存储在 Controller 中，并在更改时引发广播事件。在 Controller 中，我将监听此事件来更新图像。

angular.factory('photo', function($rootScope) {
    var photo =  {};

    var setPhoto = function (p) {
        photo = p;
        $rootScope.$broadcast('photoChanged', p);
    };

    var service = {};
    service.setPhoto = setPhoto;
    return service;
});

angular.controller('photoController', function($rootScope, $scope, photo) {
    $scope.photo = {};
    $rootScope.$on('photoChanged', function(p) {
        $scope.photo = p;
    });

    $scope.changePhoto = function(p) {
        photo.setPhoto(p);
    };
});