Question

我使用模态功能显示完整尺寸的图像。

            $scope.openModalPicture = function (id) {
                var modalInstance = $modal.open({
                    templateUrl: '../user/picture/'+id,
                    controller: ModalInstanceCtrl
                });
            };

因此，如果我在浏览器http://whatever.com/user/picture/10中调用它，它将呈现一些带有图片的html。问题是在页面加载时角度加载http://whatever.com/user/picture/10。如果用户10的图片在页面加载后发生变化，我点击调用openModalPicture功能，我仍然会看到上一张图片。

我发现templateUrl只是一个本地模板，所有内容都与$ scope变量一致。唯一的解决方案似乎是通过$http请求检索我需要的数据并填充本地templateUrl，还是有另一种技巧？

编辑：查看plunker http://plnkr.co/edit/ZkhaSfE7yafiRciOKLt8?p=preview

Answer 1

您可以将参数传递给模态。因此，如果您的主控制器中的图片具有正确的URL，请在打开时将其传递给模态。

$scope.openModal = function () {
    var modalInstance = $modal.open({
        templateUrl: 'modal.html',
        controller: ModalInstanceCtrl,
        size:'sm',
        resolve: {
            picture: function() {
                //you can pass any other parameter instead of hard-coded string of course
                return "http://freedogpics.com/wp-content/uploads/2014/08/pictures_1407299643.jpg";
            }
        }
    });
};

var ModalInstanceCtrl = function ($scope, $modalInstance, picture) {
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
    $scope.picture = picture;
};

和模板：

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td valign="top"><span ng-click="cancel()">Close</span></td>
    <td><img ng-src="{{picture}}" border="0"/></td>
  </tr>
</table>

我用an example修改了你的plunkr。

AngularJS bootstrapUI：如何在模态中呈现动态页面？

1 个答案: