草庐IT

javascript - 在 AngularJS 模态对话框中是否有处理 "Cancel"的模式?

coder 2023-07-04 原文

注意:这不是关于使用 AngularJS 显示模态对话框,该主题有很多问题和答案!

这个问题是关于如何在页面的模态对话框中对确定和取消使用react。假设您有一个只有一个变量的作用域:

$scope.description = "Oh, how I love porcupines..."

如果我在页面上为您提供一个模式对话框并在该对话框中使用 ng-model="description",您所做的所有更改实际上都是在您键入时实时对描述本身进行的。这很糟糕,因为那样的话您如何取消该对话框?

有一个问题说要做我在下面解释的事情。接受的答案与我想出的“解决方案”相同:AngularJS: Data-bound modal - save changes only when "Save" is clicked, or forget changes if "Cancel" is clicked

如果单击按钮调出模态返回到后面的函数并为模态创建相关数据的临时副本然后弹出模态,我可以看到如何做到这一点。然后“确定”(或“保存”或其他)可以将临时值复制到实际模型值。

main.js(摘录):

$scope.descriptionUncommitted = $scope.description;

$scope.commitChanges = function () {
  $scope.description = $scope.descriptionUncommitted;
}

main.html(摘录):

<input type="text" ng-model="descriptionUncommitted"/>

<button ng-click="commitChanges()">Save</button>

问题是它不是声明性的!事实上,它与其他地方的 AngularJS 完全不同。就好像我们需要一个 ng-model-uncommitted="description",他们可以在其中进行他们想要的所有更改,但只有当我们用另一个声明触发时他们才会提交。某处的插件中是否有这样的东西,或者是 AngularJS 本身添加了它?

编辑:似乎可以按顺序举一个不同方式的例子。

主要.js:

$scope.filename = "panorama.jpg";
$scope.description = "A panorama of the mountains.";

$scope.persist = function () { // Some function to hit a back end service. };

main.html:

<form>
  <input type="text" ng-model-uncommitted="filename"/>
  <input type="text" ng-model-uncommitted="description"/>

  <button ng-commit ng-click="persist()">Save</button>
  <button ng-discard>Cancel</button>
</form>

我在它周围贴了一个表单标签,因为我不知道你会如何对这些项目进行分组,所以很明显它们都是同一个“交易”的一部分(因为没有更好的词)。但是需要某种方式使这一切都可以自动发生,并且模型变量的克隆副本用于初始值,用于输入并自动更新,验证等,然后最终丢弃或复制到相同的值最初用于在用户决定提交时创建它们。

在大型网站中为 20 个模式一遍又一遍地执行此操作是否比 Controller 中的代码更容易?还是我疯了?

最佳答案

基本上,在 Angular 中,如果某些内容不是声明性的,您可以制定一个指令

 .directive('shadow', function() {
  return {
    scope: {
      target: '=shadow'            
    },
    link: function(scope, el, att) {
      scope[att.shadow] = angular.copy(scope.target);

      scope.commit = function() {
        scope.target = scope[att.shadow];
      };
    }
  };

然后:

  <div shadow="data">
    <input ng-model="data">
    <button ng-click="commit()">save</button>
  </div>

因此 shadow 指令中的 data 将是原始 data副本。 并且当点击按钮时它会被复制回原来的。

这是工作示例:jsbin

我没有在这个示例之外对其进行测试,因此它在其他情况下可能不起作用,但我认为它给出了可能性的想法。

编辑:

另一个使用对象而不是字符串的示例,以及表单中的多个字段(此处需要额外的 angular.copy):jsbin

Edit2, Angular 版本 1.2.x

根据这个change , 指令内的 input 不再访问隔离范围。一种替代方法是创建一个非隔离的子作用域 (scope:true),以保存数据的副本并访问父作用域以保存它。

因此对于更高版本的 Angular,这是与之前相同的方法,稍作修改即可实现此目的:

.directive('shadow', function() {
  return {
    scope: true,
    link: function(scope, el, att) {
      scope[att.shadow] = angular.copy(scope[att.shadow]);

      scope.commit = function() {
        scope.$parent[att.shadow] = angular.copy(scope[att.shadow]);
      };
    }
  };
});

示例:jsbin

请注意,使用 $parent 的问题在于,如果最终中间有另一个作用域,它可能会中断。

关于javascript - 在 AngularJS 模态对话框中是否有处理 "Cancel"的模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16838148/

有关javascript - 在 AngularJS 模态对话框中是否有处理 "Cancel"的模式?的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  4. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  5. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  6. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  7. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本,我按照提供的说明安装了arubagem。它在我的Gemfile中,我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作,我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了,但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  8. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  9. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加?这是我的解决方案,但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  10. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”,并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符,电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时,所有测试都通过了,但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

随机推荐