Question

我觉得这可能是Angularjs UI Modal Forms的副本，但是我已经看了一个小时，我仍然无法让它发挥作用。

我尝试弹出一个模式，你可以在其中设置某个名称，将该名称添加到现有哈希，然后将该哈希值保存到数组中，但出于某种原因我不能这样做获取要从html绑定到模态实例的名称，因此我始终坚持使用初始名称值。

这是我为证明问题所做的一个掠夺者： http://plnkr.co/edit/zk6eZo7Xq17tiiSOO2Cv?p=preview

如果您不想看看这个问题，请参考以下相关代码：

html：

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js">    </script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalCtrl" ng-init="roll={numSides: 6}">
    <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Save your custom roll!</h3>
    </div>
    <div class="modal-body">
        Name: <input ng-model="name" />
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

<button type="submit" class="btn btn-default" ng-click="save(roll)" >Save to Common Rolls</button>
    {{roll.name}}
 </div>
  </body>
</html>

js：

angular.module('plunker', ['ui.bootstrap']);
var ModalCtrl = function ($scope, $modal, $log) {

  $scope.name = "initial name";

  $scope.save = function (customRoll) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: SaveRollCtrl,
      resolve: {
        customRoll: function () {
      customRoll.name = $scope.name;
      $log.info('customRoll.name: ' + customRoll.name);
      return customRoll;
    }
  }
});

modalInstance.result.then(function(customRoll) {
    $log.info(customRoll);
  }, function () {
    $log.info('Modal dismissed at: ' + new Date());
  });
  };
};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var SaveRollCtrl = function ($scope, $modalInstance, $log, customRoll) {
  $log.info('customRoll.name: ' + customRoll.name);
  $scope.name = customRoll.name;

  $scope.ok = function () {
    $log.info('instance name: ' + $scope.name);
    customRoll.name = $scope.name;
    $modalInstance.close(customRoll);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

Answer 1

好的，经过这个又一个小时左右的工作后，我终于明白了。我没有尝试使用$ scope.name值，而是将html绑定到roll.name，这不是现有值，但我能够将其设置在模态解析中，然后将其绑定到modalInstance而不会出现任何问题所有！

如果你很好奇，这是更新的plunker： http://plnkr.co/edit/zk6eZo7Xq17tiiSOO2Cv?p=preview

以下是对javaScript的更改：

angular.module('plunker', ['ui.bootstrap']);
var ModalCtrl = function ($scope, $modal, $log) {

  $scope.save = function (customRoll) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: SaveRollCtrl,
      resolve: {
        customRoll: function () {
      $log.info('customRoll.name: ' + customRoll.name);
          customRoll.name = "initial";
          return customRoll;
        }
      }
    });

modalInstance.result.then(function(customRoll) {
    $log.info(customRoll);
  }, function () {
    $log.info('Modal dismissed at: ' + new Date());
  });
  };
};

var SaveRollCtrl = function ($scope, $modalInstance, $log, customRoll) {
  $log.info('customRoll.name: ' + customRoll.name);
  $scope.roll = customRoll;

  $scope.ok = function () {
    $log.info('instance name: ' + $scope.roll);
    $modalInstance.close($scope.roll);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

如何获取范围变量以在角度引导模态之间传递

1 个答案: