角UI引导模态更新$范围 [英] Angular UI Bootstrap Modal update $scope

问题描述

我想使用的模式来编辑我的数据。我将数据传递到模态实例。当我点击ok我通过在$ scope.selected回控制器编辑的数据。

有我想更新原来的$范围。不知怎的，$范围不更新，虽然。我在做什么错了？

  VAR ModalDemoCtrl =功能（$范围，$模式，$日志）{  $ scope.data = {名称：''，串行：''}  $ scope.edit =功能（theIndex）{    VAR modalInstance = $ modal.open（{
      templateUrl：myModalContent.html'，
      控制器：ModalInstanceCtrl，
      解析：{
        项目：功能（）{
          返回$ scope.data [theIndex]
        }
      }
    }）;    modalInstance.result.then（功能（将selectedItem）{
      $ scope.selected = selectedItem属性;      //这是其中数据被更新，但不这样做
      $ scope.data.name = $ scope.selected.name;
      $ scope.data.serial = $ scope.selected.serial;    }）;
  };
};
 

模态控制器：

  VAR ModalInstanceCtrl =功能（$范围，$ modalInstance，物品）{  $ scope.items =物品;
  $ scope.selected = {
    名称：$ scope.items.name，
    串行：$ scope.items.serial
  };  $ scope.ok =功能（）{
    $ modalInstance.close（$ scope.selected）;
  };  $ scope.cancel =功能（）{
    $ modalInstance.dismiss（'取消'）;
  };
};
 

莫代尔：

 ＆LT; D​​IV CLASS =模头＆GT;
    ＆LT; H3＆GT; {{名}}＆LT; / H3 GT＆;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =模体＆GT;
    ＆LT;输入类型=文本VALUE ={{串行}}＆GT;
    ＆LT;输入类型=文本VALUE ={{名}}＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =模式躯＆GT;
    ＆LT;按钮类=BTN BTN-主要NG点击=OK（）＆GT;确定＆LT; /按钮＆GT;
    ＆LT;按钮类=BTN BTN-警告NG点击=取消（）＆GT;取消＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

解决方案

您不包括您的模态模板，所以这是一个有点猜测。您code是pretty接近例如code对角模式的UI，使用 NG-重复在模板中。如果你正在做同样的事情，那么你就应该知道， NG-重复创建一个子范围从父继承。

这段代码来看：

  $ scope.ok =功能（）{
    $ modalInstance.close（$ scope.selected）;
};
 

它看起来像，而不是在你的模板这样做：

 ＆LT;李NG重复= GT中的项项＆;
    ＆LT;一个NG点击=selected.item =项目＆GT; {{}项}＆LT; / A＆GT;
＆LT; /李＆GT;
 

您可能会做这样的事情：

 ＆LT;李NG重复= GT中的项项＆;
    ＆LT;一个NG点击=选择=项目＆GT; {{}项}＆LT; / A＆GT;
＆LT; /李＆GT;
 

如果是这样，那么你的情况，你分配选在子范围和父范围的选择这不会影响属性。然后，当您尝试访问 $ scope.selected.name ，这将是空的。
一般情况下，你应该使用对象为您的模型，并在其上​​设置属​​性，不能直接分配新的值。

更详细地解释的范围问题文档的这一部分。

编辑：

您也不会你输入绑定到任何模型可言，所以您输入的数据有永远储存在任何地方。您需要使用 NG-模型来做到这一点，例如：

 ＆LT;输入类型=文本NG模型=editable.serial/＆GT;
＆LT;输入类型=文本NG模型=editable.name/＆GT;
 

请参阅这plunkr 获取工作的例子。

I want to use the modal to edit my data. I pass the data to the modal instance. When I click ok I pass the edited data in the $scope.selected back to the controller.

There I would like to update the original $scope. Somehow the $scope doesn't update though. What am I doing wrong?

var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.data = { name: '', serial: ''  }

  $scope.edit = function (theIndex) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.data[theIndex];
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;

      // this is where the data gets updated, but doesn't do it
      $scope.data.name = $scope.selected.name;
      $scope.data.serial = $scope.selected.serial;

    });
  };
};

Modal Controller:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    name: $scope.items.name,
    serial: $scope.items.serial
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected);
  };

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

Modal:

<div class="modal-header">
    <h3>{{ name }}</h3>
</div>
<div class="modal-body">
    <input type="text" value="{{ serial }}">
    <input type="text" value="{{ 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>

解决方案

You didn't include your template for the modal, so this is a bit of a guess. Your code is pretty close to the example code for the angular-ui modal, which uses ng-repeat in the template. If you're doing the same thing, then you should be aware that ng-repeat creates a child scope which inherits from the parent.

Judging from this snippet:

$scope.ok = function () {
    $modalInstance.close($scope.selected);
};

it looks like instead of doing this in your template:

<li ng-repeat="item in items">
    <a ng-click="selected.item = item">{{ item }}</a>
</li>

you may be doing something like this:

<li ng-repeat="item in items">
    <a ng-click="selected = item">{{ item }}</a>
</li>

If so, then in your case, you're assigning selected in the child scope, and this will not affect the parent scope's selected property. Then, when you try to access $scope.selected.name, it will be empty. In general, you should use objects for your models, and set properties on them, not assign new values directly.

This part of the documentation explains the scope problem in more detail.

Edit:

You are also not binding your inputs to any model at all, so the data you enter there is never stored anywhere. You need to use ng-model to do that, e.g.:

<input type="text" ng-model="editable.serial" />
<input type="text" ng-model="editable.name" />

See this plunkr for a working example.

这篇关于角UI引导模态更新$范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！