天道酬勤,学无止境

如何使用angularjs真正防止元素被放入DOM(How to really prevent an element from being put into the DOM with angularjs)

问题

假设您有以下代码来显示一些产品图像:

<ul>
  <li ng-repeat="p in products">
    <img ng-src="/images/{{p.img}}"/>
  </li>
</ul>

现在假设有些产品很遗憾没有图片,您可以通过以下方式解决:

<ul>
  <li ng-repeat="p in products">
    <img ng-hide="p.img==undefined" ng-src="/images/{{p.img}}"/>
  </li>
</ul>

现在转到 firebug 或 chrome 开发人员工具的“网络”选项卡并检查图像下载——你会看到错误,因为浏览器仍然试图下载不存在的图像。 它是隐藏的,用户不会注意到,但这当然是不好的:不好的做法,不利于服务器性能,坏坏坏......

什么是正确的“角度”解决方案?

回答1

@Arun 解决方案的替代方法是使用 ng-switch 或 ng-if(在 v1.1.5 中可用),它们添加/删除 DOM 元素,与 ng-hide/ng-show 不同:

<ul>
  <li ng-repeat="p in products">
    <span ng-switch="p.img==undefined">
      <img ng-switch-when="false" ng-src="/images/{{p.img}}"/>
    </span>
  </li>
</ul>

有关使用 ng-if 的示例,请参阅@Rob 的答案。

回答2

使用 1.1.5 版,您可以使用 ng-if,正如@Abilash 建议的那样:

<img ng-if="p.img" ng-src="/images/{{p.img}}"/>
回答3

你可以做类似的事情

<ul>
    <li ng-repeat="p in products | imgsrc">
        {{p.img}}
        <img ng-src="/images/{{p.img}}"/>
    </li>
</ul>


app.filter('imgsrc', function(){
    return function(data){
        var a = [];
        angular.forEach(data, function(v, i){
            if(v.img){
                a.push(v);
            }
        });
        return a;
    }
});

演示:小提琴

标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • AngularJS策略防止类的未样式化内容闪烁(AngularJS strategy to prevent flash-of-unstyled-content for a class)
    问题 我有一个AngularJS项目,我想在类名的页面加载期间防止FOUC。 我已经阅读了有关ng-template的信息,但这似乎仅对标记中的内容有用。 <body class="{{ bodyClass }}"> 我希望它可以在页面加载时“登录”。 有什么策略吗? 还是我只需要捏造它并以“登录”身份加载它,然后手动使用javascript来为此实例调整DOM。 回答1 您正在寻找的是ng-cloak 。 您必须像这样添加它: <body class="{{ bodyClass }}" ng-cloak> 这样可以防止不必要的闪烁。 链接到有关此文档。 编辑: 根据文档,也建议将以下代码段放入您的CSS文件中。 “为获得最佳结果,必须将angular.js脚本加载到html文档的头部;或者,上述css规则必须包含在应用程序的外部样式表中。” [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 回答2 您面临的问题之一是,在AngularJS加载并开始处理DOM之前,浏览器将显示<body>元素。 其他人对ng-class说法是正确的,它将应用正确的类,但是在Angular准备就绪之前,您仍然不需要显示任何内容。
  • 如何在 AngularJS 初始化之前防止元素显示(ng-show)(How to prevent element show before AngularJS initialized( ng-show ))
    问题 在AngularJS中,我想知道如何在ng-show生效之前防止页面上显示的元素,我发现一些帖子谈论ng-cloak,但在我的情况下似乎不起作用,可能ng-cloak是为了防止双大括号而不是 Element 风格。 有人谈论的另一种方式是在 AngularJS 初始化之前定义一些样式,但这有点难以管理。 有没有官方的方法来处理这个问题? 回答1 除非你想展示一个加载器,否则 ng-cloak 应该是你的解决方案。 ng-cloak 的官方文档 如果问题仍然存在,您可以尝试在 html 中添加 css 以隐藏带有 ng-cloak 的元素,以确保浏览器及时获取。 如果这样做,请选择添加 ng-cloak 的方式。 例如将其添加为类: <div ng-show="condition" class="ng-cloak">...</div> 并将其添加到您的 html head 标签中: <style> .ng-cloak { display: none !important; } </style> 回答2 如果您只想在准备好显示之前避免显示某些内容(可能已经从后端加载了一些数据),那么最好使用ng-if 。 当然,它与ng-show工作原理相同。 但是使用ng-if的优点是可以延迟额外 DOM 的创建,直到需要显示它为止,因此可以缩短初始页面加载时间。 下面是一个例子: var
  • 如何在路由更改时防止 AngularJs 在 dom 上拥有旧视图和新视图(how to prevent AngularJs from having old view and new view on dom when route changes)
    问题 我正在使用一个指令“可滑动”,它创建一个滑出区域并有一个切换。 这段代码不是我写的,但它向我展示了一个更大的问题。 当我更改视图(最常见的是 /user/:id 类型)时,slideable 是模板上使用的指令。 该指令在其链接功能期间搜索元素并绑定点击事件。 问题是,当我更改路由并且正在加载新视图(相同类型但不同 id )时,指令会重新绑定到旧视图。 如果我在链接期间在 chrome 中停止浏览器,那么我将在 dom 上看到两个 ng-views,问题是它绑定到正在离开的那个。 我还有其他似乎与这种现象有关的问题。 在制定新视图时,旧视图仍然在 dom 上是否正常? 为什么在渲染新视图之前不会销毁旧视图? 我如何在这样的指令中解决这个问题? 谢谢。 我希望从概念上了解正在发生的事情。 我已经修改了指令以选择最新的视图并适当地搜索并绑定到正确的元素。 但我有点困惑,为什么会出现两者在 dom 上共存的状态。 回答1 旧 HTML 片段与新 HTML 片段一起短暂出现的一个明确原因是支持从旧到新的过渡动画。 看看 ngView 文档,你会看到一个动画过渡的例子,很明显这不是错误或设计缺陷。 通常,当有人在绑定到正确的元素或元素的事件时遇到问题,这是因为他们在选择元素时没有将选择器的范围限制为正在添加或更新的 HTML 片段,或者试图将 DOM 的一部分定位到指令之外
  • Angular.js:返回时如何还原到先前视图中运行时加载的DOM元素(保留状态)(Angularjs: how to revert back to the runtime loaded DOM elements in the previous view on going back (preserve state))
    问题 我有一个角度应用程序,它有两个视图: 1)清单检视 2)详细视图 当您从列表视图中单击缩略图时,将转到详细信息视图,这是以下路线: app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/list', { templateUrl: 'partials/list.html', controller: 'ListCtrl', }). when('/list/:id', { templateUrl: 'partials/detail.html', controller: 'DetailCtrl', }). otherwise({ redirectTo: '/list' }); }]); 现在'listCtrl'控制器中有一个loadmore函数,用于加载 myControllers.controller('ListCtrl', ['$scope', '$location', 'Troll', '$http', function ($scope, $location, Troll, $http) { $scope.Trolls = Troll.query(); $scope.orderProp = 'popular'; $scope.fromData = {}; //console
  • 在尝试选择注入 appendChild() 的节点时,如何防止 Range.selectNode() 选择过多的 DOM?(How can I prevent Range.selectNode() selecting too much of the DOM when attempting to select a node injected with appendChild()?)
    问题 我面临着在 JavaScript 中结合使用appendChild()和Range.selectNode()问题。 当尝试使用范围选择新添加的<textarea>节点时,它选择了过多的 DOM。 复制和粘贴选择似乎只包含一个空格。 但是,如果我从一开始就将<textarea>节点放入 DOM(即不要使用appendChild()添加它),那么它运行得非常好,我可以按预期复制和粘贴所选文本。 请注意,CSS 在这里并不是真正必要的,但它强调了这样一个事实,即选择包含的不仅仅是<textarea> (或者至少在 Chrome 中是这样)。 HTML: <div> <a class="hoverTrigger">Click to trigger textarea element with selected text</a> </div> CSS: .floating { position: absolute; } JavaScript/jQuery(在 DOM 上运行): $(".hoverTrigger").click(createAndSelectStuff); function createAndSelectStuff() { var textArea = document.createElement("textarea"); textArea.className =
  • AngularJS服务中的DOM操作(DOM manipulation in AngularJS services)
    问题 众所周知,使用AngularJS时必须在指令内操作DOM元素。 但是,在某些用例中,在服务内部操作DOM似乎是可以接受的。 Misko Hevery在这里谈论这个。 您还可以在Bootstrap UI对话框中找到一个示例。 Misko的解释很模糊,所以我想知道如何确定何时需要将DOM放入服务而不是指令中。 回答1 指令及其定义方式始终附加在DOM节点上。 因此,当您定义指令时,它会“扩展”或替换其所连接的DOM节点。 在某些情况下(例如对话框),您将无法将DOM节点附加到任何特定的父节点。 在这些情况下,使用服务是有道理的,并且控制器仍可以远离DOM位,因为DOM操作将封装在服务中。 弹出窗口可能是我们可能使用服务的另一种情况,但是与对话框不同,弹出窗口IS附加到DOM节点。 因此,即使那只是一个灰色区域。 因此,一个基本而简单的测试是:“可以将这部分DOM操作代码附加到DOM节点上吗?” 如果是,则执行指令。 如果否,则服务。 对话框和自定义确认框是使用服务的典型示例。 回答2 虽然我认为Ganaraj已经描述了MISKO在说好了,你可以(也可能应该)认为,对于多种形式对话(例如)的DOM操作代码可以被放入一个DOM节点。 一种方法是将对话框指令始终附加到DOM,然后使用ng-show有条件地显示它。 然后,您可以使用$rootScope或更好的服务与模式对话框进行通信。
  • 是否将在n个多个DOM节点上调用angular.bootstrap实例化n个AngularJS应用程序?(Will invoking angular.bootstrap on “n” multiple DOM nodes, instantiate “n ”AngularJS applications?)
    问题 正确的说法是,调用angular.bootstrap将创建一个新的AngularJS实例,以及一个单独的摘要周期,根作用域,注入器等? 如果是这样,是否可以嵌套此类应用程序(即在由另一个AngularJS应用程序管理的DOM内的DOM节点上调用引导程序)? (我想不!) 回答1 它将创建一个新的Angular注入器服务实例,该实例负责依赖项注入并控制应用程序生命周期。 因此,它还会创建应用程序中使用的服务的新实例(包括ng模块中的实例: $rootScope , $compile等)。 您可能会认为它是应用程序的新实例(模块的集合)。 角度本身( angular对象)未实例化。 angular.bootstrap与angular.injector (后者只是创建一个新的喷射器实例)的不同之处在于,它通过$rootElement服务将喷射器实例链接到DOM元素。 这样,此元素及其子元素与特定的注入器实例相关联(可以通过angular.element(someElement).injector() )。 无法在自举的元素(或其子元素)上引导应用程序,Angular可以防止应用程序被弄乱。 但是,Angular并不是真正的傻瓜,可以通过反向引导应用程序来完成: angular.bootstrap(nestedAppElement, ['nestedApp']); angular
  • 如何将 AngularJS 控制器绑定到动态添加的 HTML?(How to bind an AngularJS controller to dynamically added HTML?)
    问题 对于这种情况,我有一个 HTML 页面,其中包含一些 AngularJS 指令、控制器等。 像这样的东西: <html> <body> <div ng-controller="myCtrl"> <ul><li ng-repeat="item in items">{{item.name}}</li></ul> </div> <div class="placeholder"> ...new HTML here... </div> </body> </html> 请注意,页面上没有ng-app指令。 我不依赖于自动引导,而是使用手动引导方法。 angular.bootstrap(document, ['myApp']); 首先,我创建将引导到文档的模块。 然后,当加载动态确定的依赖项列表时,我会附加一些服务、控制器等。一旦一切准备就绪,我就会调用 bootstrap 方法。 这一切都很好,直到 AngularJS 之外的 JavaScript 在...new HTML here...位置附加到 DOM。 AngularJS 不处理新的 HTML。 我的理解是你需要调用$scope.$apply()或$digest()或其他东西来让 AngularJS 识别新的 HTML。 但是,在我的示例中,传入的新 HTML 周围没有控制器。传入的 HTML 可能如下所示: <div ng
  • AngularJS如何动态添加HTML并绑定到控制器(AngularJS How to dynamically add HTML and bind to controller)
    问题 我刚刚开始使用angularJS,并努力为自己想做的事情找出合适的架构。 我只有一个页面应用程序,但URL始终应该保持不变; 我不希望用户能够导航到除根目录之外的任何路由。 在我的应用中,有一个主要的div需要承载不同的视图。 访问新视图时,我希望它接管主div中的显示。 以这种方式加载的视图可以被丢弃或停留在DOM中,就像隐藏在DOM中一样-我很想知道每个视图如何工作。 我提出了一个粗略的工作示例,以说明我要做什么。 请参阅此Plunk中的工作示例。 基本上,我想将HTML动态加载到DOM中,并使标准的angularJS控制器能够连接到该新HTML中。 有没有比使用我在这里使用的自定义指令和使用$ compile()挂接到Angular更好/更简单的方法了? 也许有点像路由器,但是不需要URL进行更改才能运行吗? 这是到目前为止我正在使用的特殊指令(摘自另一篇SO文章): // Stolen from: http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database myApp.directive('dynamic', function ($compile) { return { replace: true, link: function
  • 当用户点击他的子元素时如何防止父点击事件? AngularJS(How to prevent parent click event when the user clicks on his child element? AngularJS)
    问题 我有一个<div>与ng-click ,但这样<div>有一个孩子也是一个元素ng-click指令。 问题是子元素上的点击事件也会触发父元素的点击事件。 当我点击他的孩子时,如何防止父点击事件? 这是一个 jsfiddle 来说明我的情况。 预先感谢您的帮助。 编辑 这是我的代码: <body ng-app ng-controller="TestController"> <div id="parent" ng-click="parentClick()"> <div id="child" ng-click="childClick()"></div> <p ng-bind="elem"></p> </div> <div><p style="text-align:center" ng-bind="childElem"></p></div> </body> <script> function TestController($scope) { $scope.parentClick = function() { $scope.elem = 'Parent'; } var i = 1; $scope.childClick = function() { $scope.elem = 'Child'; $scope.childElem = 'Child event triggered x' +
  • 单击一次后如何禁用提交按钮以防止在Angularjs中进行多次提交?(How do you disable the submit button after a single click to prevent multiple submissions in Angularjs?)
    问题 我遍及整个网络,包括几个堆栈溢出示例,以解决该问题。 具体来说,我尝试了以下方法: var disableButton = function() { document.getElementById('<%= btnSubmit.ClientID %>').disabled = true; } $scope.isDisabled = false; var someFunc = function() { $scope.isDisabled = true; } <button OnClientClick="disableButton()" type="submit">Submit</button> <button ng-disabled="isDisabled" type="submit">Submit</button> 两者都没有像广告中那样工作。 还有其他建议吗? 请仅提供角度建议。 谢谢你。 回答1 您非常接近答案。 您唯一错过的是使用ng-click在按钮上调用someFunc()函数。 另一个问题是,在您的控制器中,该函数应为$scope.someFunc()而不是var someFunc() 工作示例: index.html应该类似于: <html> <head> <script data-require="angular.js@1.3.15" data-semver=
  • 使用angularjs列出重新排序动画(List reorder animation with angularjs)
    问题 我正在用angularjs开发一个项目,该项目有一个对象列表,这些对象是实时更新的,每次更新都会重新排序。 我想为这些对象从开始到结束的位置平滑移动设置动画,例如,当列表重新排序时: A C B -> A C B A和B将分别下降一个点,C将上升两个点,速度快两倍。 当您手动操作DOM时,这很容易完成-如果您通过更改list的style.top来移动list元素,则只需将 transition-duration: 0.5s, 0.5s; transition-property: top; 放入元素的CSS中,它会自动发生。 但是,如果您使用ngRepeat显示列表,此技巧将不起作用,因为(据我所知),angular实际上会重新创建组成列表的DOM元素以进行更新,而不是四处移动DOM元素。 不幸的是,我发现很难用角度动画来重现此功能。 我遇到的问题是,角度移动动画似乎不知道每个元素的起始位置。 使用ngAnimate指令,您可以让angular在元素移动时自动在其上设置css类,以模拟其淡入或淡出。 但是您没有该元素以前所在的位置的信息,因此无法从原来的位置平稳地移动它-它只是被传送到新的位置,因此您必须使其在周围跳舞。 据我所知,这对于javascript动画也是正确的-将其角度传送到适当位置,然后将其传递给您的函数,而无需任何历史信息。
  • 真正阻止绑定的元素-取消绑定元素-AngularJS(Genuinely stop a element from binding - unbind an element - AngularJS)
    问题 我正在尝试找出如何阻止DOM元素以角度限制来自合并范围的数据。 我知道您可以使用if语句和所有方法来执行此操作,但是是否有一种真正而永久的方法来停止以角度绑定元素,但保留添加的内容? 所以说我有这个 <div ng-bind=​"content" class=​"ng-binding">​Welcome​</div>​ 我更改了模型,以便div更改为此。 <div ng-bind=​"content" class=​"ng-binding">​Welcome​ World</div>​ 然后,单击将其解除绑定的按钮,因此,如果将模型更改为'Welcome Universe' ,则<div>不会与以前相同。 这个 <div ng-bind=​"content" class=​"ng-binding">​Welcome​ World</div>​ 我知道还有许多其他方法可以执行此操作,但是我不知道要真正地解除绑定元素的任何方法,而不必克隆它并替换循环属性和文本的旧方法。 演示内容:http://jsfiddle.net/a9tZY/ 因此,这样做不会影响模型或绑定到该模型的其他元素。 长话短说,告诉Angular将元素永远保留下来。 回答1 更新 这样做的方法是使用类似的指令在元素上创建一个新的作用域。 yourModule.directive('unbindable'
  • 如何使用 Eclipse 插件修改 HTML 源代码? [关闭](How can I modify HTML source using an Eclipse plugin? [closed])
    问题 关闭。 此问题不符合 Stack Overflow 准则。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其成为 Stack Overflow 的主题。 4年前关闭。 改进这个问题 我想编写一个 Eclipse 插件来修改 HTML 源文件,例如。 根据某些情况查找和更改href或src 。 我对 Eclipse 相当陌生,但我搜索了很多可以实现这一点的东西,但找不到任何类似的东西,我能找到的唯一 API 是修改 Java 代码。 有没有我可以修改的 API 或者开源 Eclipse 插件来完成这个? 回答1 如果您正在编写 Eclipse 插件,则可以使用来自 Web 工具平台 (WTP) HTML 插件的 API(以下注意事项)。 无头插件将需要: org.eclipse.wst.html.core org.eclipse.wst.xml.core org.eclipse.wst.sse.core org.eclipse.text org.eclipse.core.resources 需要承担很多依赖项,但这些模型与在 WTP 的 HTML 编辑器(以及 WTP 提供的大多数编辑器,除了 JavaScript 工具)下运行的模型相同。 import org.eclipse.wst.sse.core.internal.provisional.IModelManager
  • AngularJS:防止隐藏表单字段被验证(AngularJS: Prevent hidden form fields being validated)
    问题 防止在 AngularJS 中验证隐藏表单字段的最佳方法是什么? 回答1 我最初错过了内置的ngRequired指令。 还有一个required标签,这让我很困惑。 现在,我们可以使用相同的逻辑(我们用来隐藏元素)来设置ngRequired false。 这是一个实际用例示例:我想询问已婚人士他们有多少个孩子,但是,如果他们未婚,只需隐藏有关孩子的字段。 <form ng-app name="form"> Marital status: <select ng-model="maritalStatus" required> <option value="">Select...</option> <option value="M">Married</option> <option value="UM">Unmarried</option> </select> <div ng-show="maritalStatus == 'M'"> Number of children: <input type="number" ng-model="children" ng-required="maritalStatus == 'M'"> </div> (for testing) Is this form correctly filled? {{form.$valid}} </form> 回答2
  • AngularJS:单击“一种好的做法”吗? 为什么AngularJS中没有ng- {event}?(AngularJS: Is ng-click “a good practice”? Why is there no ng-{event} in AngularJS?)
    问题 我才刚刚开始学习AngularJS,并尝试了一些AngularJS的概念。 如果有人可以向我解释一些观点,那就太好了。 我了解ng-click在技​​术上与onclick (请参见此处),但是两者均位于标记中。 我以为那是“坏习惯”? 如果大多数人说这是“不好的”,为什么这是AngularJS的核心概念之一? 我认为最好从JavaScript中选择DOM元素,而不要在标记中放置逻辑。 如果ng-click是对AngularJS中的click事件做出反应的正确方法,那么我应该如何处理其他DOM事件? 我看到还有其他一些指令,例如ng-mouseover ,但并非所有DOM事件都具有等效的AngularJS。 我将如何在AngularJS中处理“放置”事件(因此采用AngularJS方式-而不是常规方式)? 需要明确的是:我想将文件拖到我的Web应用程序中。 非常感谢Pipo 回答1 如果大多数人说这是“不好的”,为什么这是AngularJS的核心概念之一? 好吧,那些真正喜欢Unobtrusive JavaScript的人可能会说这很糟糕。 Angularian(以及那些具有弹性背景的人)在更具说明性的方法中看到了价值。 “ Angular是基于这样的信念构建的:在构建UI和将软件组件连接在一起时,声明性代码比命令性要好。。
  • 防止某些 DOM 层次结构中的 AngularJS 插值(Prevent AngularJS interpolation in certain DOM hierarchies)
    问题 我使用 AngularJS 并且有一些我不想插入的 HTML 部分,因为它包含用户输入的数据。 所以潜在的数据可能有{{asdf}} ,我不希望 AngularJS 解析。 这是因为如果用户输入{{{}, {}}这可能会中断编译过程并阻止任何 Angular 代码运行。 有没有办法通过向 Angular 指定不编译 DOM 树的这一部分来解决这个问题? 回答1 我相信 Non Bindable 指令正是您要寻找的。 因此,您可以在任何元素上执行以下操作: <div ng-non-bindable> Some {{1+2}} expressions</div> 那将显示: Some {{1+2}} expressions
  • 使用 AngularJS 模型时如何防止 IE8 中的缓存(How to Prevent Caching in IE8 when using AngularJS Models)
    问题 我的技术栈是—— AngularJS 引导程序春季MVC 休眠 我在做什么 : 有一个我正在执行 CRUD(创建、读取、更新和删除)的项目列表 通过 Angular Controller 将表单数据发布到 Spring Controller。 Spring Controller -> DAO 方法 -> DB 被更新弹簧控制器返回“Y”或“N” Angular 获取状态消息并重新加载 Angular 模型(用于填充项目列表的 Json 数组) 与更新和删除相同 我的目标是在不重新加载页面的情况下实现实时数据操作。 这在 Chrome 中运行良好。 但是,IE 无法检测到模型更改。 它在添加/更新/删除(从其缓存中)之前一直显示数据。 只有在我手动清除缓存后,我才能真正看到更改后的模型。 需要有关如何使用 IE8 及更高版本解决此问题的帮助。 PS我已经尝试过设置元标题 回答1 你可以设置 “服务器端响应的无缓存标头” var AppInfrastructure = angular.module('App.Infrastructure', []); 在 Angularjs 中你可以编写拦截器,下面是示例代码: AppInfrastructure .config(function ($httpProvider) { $httpProvider
  • 如何使用 AngularJs 防止屏幕闪烁?(How to prevent screen flickering with AngularJs?)
    问题 我有多个从数据库中获取数据的指令。 在一种情况下,我将所有指令都放在一个屏幕上。 这意味着当屏幕加载时,每个下拉列表/字段都会被一个一个填充:首先你看到字段 A 是字段,然后字段 B 得到他的值,然后字段 C 等等。我不想要这个,我想要一次显示所有数据。 我怎样才能做到这一点? 这是指令的一个示例。 我有大约 10 个这样的指令。 app.directive("environmentDropdown", ['EnvironmentService', function (EnvironmentService) { return { restrict: 'E', template: '<select class="form-control" data-ng-options="e.Id as e.Name for e in environments"></select>', scope: { }, replace:true, link: function (scope, element, attributes) { EnvironmentService.getEnvironments().then(function (response) { scope.environments = response; }); } } }]) 回答1 为此,我正在使用 ng Cloak 它使元素
  • 在 rails 控制器中,如何防止双重提交(当用户双击提交按钮或按两次 Enter 时)?(In rails controllers, how to prevent double submit (when user double-clic submit button or hit enter twice)?)
    问题 好吧,所有内容都在标题中,但我会再解释一下:-) 我的 rails 应用程序包含许多形式(Ajaxified 与否)。 为了防止用户提交两次或多次某些表单,我使用了 Javascript。 这是我的 Ajaxified 表单的场景: 用户提交表单(点击或输入) javascript禁用提交按钮 rails 控制器做一些事情(比如一个 Soap 请求或一个 DB 中的插入) rails 控制器更新页面并在必要时启用提交按钮(以防万一) 现在我想添加服务器端代码以在用户绕过 javascript 时保持真正干净。 有什么建议么? 回答1 尝试使用 Redis 锁定并用类似的东西包围你的块 Redis.current.lock("#{current_user.id}.action_name") do # Some code end 这是我正在使用的 gem https://github.com/mlanett/redis-lock 回答2 您可以将选项 :disable_with => "Please Wait..." 添加到提交标签。 回答3 我在 4 个场景中使用了 4 种方法,请首先在这里选择我的 awnser:防止在 Rails AJAX 表单中重复提交 用户仅点击限制: 使用 stopImmediatePropagation 并将点击事件添加到目标 dom。 /** *