Question

说明

我有一个模式，用户可以在其中查看他们的个人资料图片＆amp;上传一个新的。此个人资料图片也会在导航栏中显示（名称旁边）。

目前的流程如下：

用户转到模态
用户没有照片，显示默认股票头像。用户，显示他们的
用户上传新照片，HTTP响应会返回src属性
控制器更新范围并将$scope.photo设置为等于响应

现在，这应该完美无缺。但是，我在侧面导航的布局视图中也有配置文件照片，这是在另一个控制器的命令下。

范围变量名称相同且HTML相同，它们由同一服务设置。但是，范围是由不同的控制器设置的。

以下是模态控制器的代码：

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

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

如何从模态更改时更新它？我无法做$scope.onFileSelect，因为那是在另一个控制器内部的模态中。

我需要以某种方式通知Angular照片已被更改并在另一个控制器中更新。

我有什么选择？

Answer 1

也许你可以通过播放照片改变的事件来解决这个问题。我会将照片存储在服务中，而不是存储在控制器中，并在更改时引发广播事件。在控制器中，我会听这个事件来更新图像。

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

一个地方的AngularJS范围变化应该在另一个地方变化，如何实现？

1 个答案: