热门标签 | 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。


    推荐阅读
    • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
    • 本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程,将每个考题分配给3个独立的专家,如果他们的评分不一致,则需要请一位裁判做出最终决定。文章详细描述了评分规则,并给出了解决该问题的程序。 ... [详细]
    • 【shell】网络处理:判断IP是否在网段、两个ip是否同网段、IP地址范围、网段包含关系
      本文介绍了使用shell脚本判断IP是否在同一网段、判断IP地址是否在某个范围内、计算IP地址范围、判断网段之间的包含关系的方法和原理。通过对IP和掩码进行与计算,可以判断两个IP是否在同一网段。同时,还提供了一段用于验证IP地址的正则表达式和判断特殊IP地址的方法。 ... [详细]
    • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
    • 使用圣杯布局模式实现网站首页的内容布局
      本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
    • GetWindowLong函数
      今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
    • VScode格式化文档换行或不换行的设置方法
      本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
    • Nginx使用(server参数配置)
      本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
    • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
    • Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    • Python瓦片图下载、合并、绘图、标记的代码示例
      本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
    • 本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤,包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
    • Html5-Canvas实现简易的抽奖转盘效果
      本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
    • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
      本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
    • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
    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社区 版权所有