热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AngularUIBootstrapModal更新$scope-AngularUIBootstrapModalupdate$scope

Iwanttousethemodaltoeditmydata.Ipassthedatatothemodalinstance.WhenIclickokIpa

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.

我想使用模态来编辑我的数据。我将数据传递给模态实例。当我单击确定时,我将$ scope.selected中的已编辑数据传递回控制器。

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

在那里,我想更新原始的$ scope。不知何故,$ scope不会更新。我究竟做错了什么?

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:

莫代尔:




1 个解决方案

#1


14  

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.

你没有为模态包含你的模板,所以这是一个猜测。您的代码非常接近angular-ui模式的示例代码,该模式在模板中使用ng-repeat。如果你正在做同样的事情,那么你应该知道ng-repeat创建了一个继承自父级的子范围。

Judging from this snippet:

从这个片段判断:

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

it looks like instead of doing this in your template:

看起来不是在你的模板中这样做:

  • {{ item }}
  • you may be doing something like this:

    你可能会做这样的事情:

  • {{ item }}
  • 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.

    如果是这样,那么在您的情况下,您在子范围中指定了选定内容,这不会影响父范围的selected属性。然后,当您尝试访问$ scope.selected.name时,它将为空。通常,您应该为模型使用对象,并在其上设置属性,而不是直接分配新值。

    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.:

    您根本没有将输入绑定到任何模型,因此您输入的数据永远不会存储在任何位置。你需要使用ng-model来做到这一点,例如:

    
    
    

    See this plunkr for a working example.

    有关工作示例,请参阅此plunkr。


    推荐阅读
    author-avatar
    捕鱼达人2602881157
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有