Angular UI modalinstance将数据传递给视图

时间:2015-12-15 23:13:03

标签: angularjs angular-ui-bootstrap

我喜欢使用angular ui bootstrap插件将数据从1个视图(主视图)传递到模态视图,下面是我的代码似乎无法工作:

主视图

vm.receipt_id = "1234"

<button type="button" class="btn btn-default" ng-click="vm.alertMeJimmy(vm.receipt_id)">Large modal</button>

控制器

       vm.alertMeJimmy = function(receipt_id) {

            $uibModal.open({
            animation: true ,
            templateUrl: '/cashier/views/cashier.angular_components.modal',
            controller: 'PatientsController',
            controllerAs: 'vm',
            resolve: {
             receipt_id : function () {
                  return receipt_id ;
                }

             },
            size: 'lg'

          });

        }

模态视图

id喜欢在我的模态视图中访问它,如下所示

<span ng-bind="vm.receipt_id " ></span>

1 个答案:

答案 0 :(得分:5)

返回一个对象而不是一个原语:

angular.module('App').controller('Controller', [
             '$uibModal',
    function ($uibModal) {
        var vm = this;
        vm.receipt_id = 1234;
        vm.alertMeJimmy = function (receipt_id) {
            var modalInstance = $uibModal.open({
                size: 'sm',
                templateUrl: 'modal.html',
                controller: 'Modal as vm',
                resolve: {
                    'receipt': { id: receipt_id }
                }
            });
        }
    }
]);

angular.module('App').controller('Modal', [
             'receipt',
    function (receipt) {
        var vm = this;
        vm.receipt = receipt;
    }
]);

关于Plunker的示例:http://plnkr.co/edit/d9RLJLHr1zr9d5gVKHpD?p=preview