Question

我有一个在ng-click

上打开UI模式的简单页面

<a class="btn btn-primary" ng-click="vm.open()">Take The Pledge</a>

＆＃39;控制器＆＃39;对于那个特定的页面

vm.open = function (size) {
    $modal.open({
        animation: true,
        templateUrl: '/App/pages/programs/pledgeModal.html',
        controller: 'PledgeCtrl',
        size: size
    });
};

该模式会打开pledgeModal html模板，但不会将pledge数据传递给PledgeCtrl

<div class="modal-body">               
    <div class="row">
        <div class="col-md-6">
            <input type="text" class="form-control" placeholder="Enter Name" ng-model="pledge.Name">
        </div>
        <div class="col-md-6">
            <input type="email" class="form-control" placeholder="Enter Email" ng-model="pledge.Email">
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok(pledge)">Submit</button>
</div>

在PledgeCtrl中的

我无法让pledge对象传递

function ok(pledge) {

    $http.post('http://myURL', pledge).
        success(function (data, status, headers, config) {
            $log.info('success');
        }).
        error(function (data, status, headers, config) {                
            $log.debug(data);
        });
}

将pledge传递给PledgeCtrl，我错过了什么？

Answer 1

首先，您需要从html

传递pledge

<a class="btn btn-primary" ng-click="vm.open('sm', pledge)">Take The Pledge</a>

然后，在简单页面的控制器中，使用resolve

vm.open = function (size, pledge) {
    var modalInstance = $modal.open({
        animation: true,
        templateUrl: '/App/pages/programs/pledgeModal.html',
        controller: 'PledgeCtrl',
        size: size,
        resolve: {
           pledge: function () {
               return pledge;
          }
        }
    });
};

然后在PledgeCtrl

app.controller('PledgeCtrl', ['$scope', '$modalInstance', 'pledge', 
    function ($scope, $modalInstance, pledge)
  ....
  ....

  $scope.ok = function (pledge) {
    $http.post('http://myURL', pledge).
    success(function (data, status, headers, config) {
        $log.info('success');
    }).
    error(function (data, status, headers, config) {                
        $log.debug(data);
    });
  };
]);

Angular UI模式未按预期传递ng-model

1 个答案: