Question

我有一个带有＆＃34;设置的接口＆＃34;打开模态窗口的按钮。我想要做的是从原始控制器更新范围值。例如，在MainController中，我定义了一个＆＃34;默认＆＃34;用于控制body标签中主题的主题。

$scope.theme = 'default';

在控制器中，我正在从视图中的输入更新$ scope.theme的值，例如ng-click＆＃34; changeTheme（newValue）＆＃34; ..更新$ scope.theme，此外，正文的类反映在这个值上。

<body ng-controller="MainController" ng-class="{midnight: theme == 'midnight'}">

这是该控制器中的模态代码

$scope.open = function (settings) {
  $scope.settings = settings;
  $modal.open({
    templateUrl: 'myModalContent.html',
    backdrop: true,
    windowClass: 'modal',
    controller: function ($scope, $modalInstance, settings) {
      $scope.settings = settings;
      $scope.submit = function () {
        $modalInstance.dismiss('cancel');
      }
    },
    resolve: {
      settings: function () {
        return $scope.settings;
      }
    }
  });
};

在视图中......这是我到目前为止所拥有的。

<script type="text/ng-template" id="myModalContent.html">
  <form ng-submit="submit()">
    <div class="modal-body">
      <label>Label</label>
      <input type="text" ng-model="settings.label" />
      <label>Value</label>
      <input type="text" ng-model="settings.theme" />
    </div>
    <div class="modal-footer">
      <input type="submit" class="btn primary-btn" value="Close" />
    </div>
  </form>
</script>

此示例在发回在此新$ scope.settings对象中创建的任何内容时起作用。但我想要的是新设置对象也从主控制器更新$ scope.theme。我错过了什么？

Answer 1

问题是我没有用他们的基本示例给予UI bootstrap足够的关注。我想要的只是在模态中找到一种方法来更新页面上的各种范围值。我弄清楚了这个例子：

http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview

我的麻烦是理解如何处理从模态改变的多个变量。这是一个非常简单的分支，说明了我最初想要解释的内容：

http://plnkr.co/edit/RYNcURKjGhWxUBpUlAkD?p=preview

使用Angular bootstrap ui模态窗口时出现问题

1 个答案: