草庐IT

javascript - Angularjs UI 模态表单

coder 2024-05-09 原文

我曾经有一个使用 Bootstrap 模式的登录对话框:

  $scope.loginDialog = {
    backdrop: true,
    keyboard: true,
    windowClass: "modal loginDialog",
    backdropClick: true,
    templateUrl: '/tmpl/user/loginForm',
    controller: function dialogController($scope, $modalInstance) {
      $scope.submit = function () {
        $http.post('/api/login', $scope.user).success(...);
      }
    }
  };

登录表单如下所示:

form#loginBox(ng-submit="submit()")
  .modal-body.login-box
    .formItem
      label(for='user[usernameOrEmail]') Name or Email:
      input(type='text', name='user[usernameOrEmail]', required="required", value='', ng-model="user.user")
    .formItem
      label(for='user[password]') Password:
      input(name='user[password]', type='password', value='', required="required", ng-model="user.password")
  .modal-footer
    input.btn.btn-primary( type="submit", value="Login")

在 angular ui 0.4 和 angularjs 1.1.3 中这工作正常。

我已经更新到最新的 angular ui 0.6 和 1.2rc2，现在这不再有效了。具体来说，$scope.user 不再与表单中的相同。如何获取表单元素的 $scope？我在 batarang 中看到它，但在 loginDialog Controller 中看不到。

谢谢

最佳答案

您在打开的模型对象上缺少 resolve 属性。这是将局部变量传递给模态 Controller 的新方法。

来自 ui-bootstrap 文档:

resolve - members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property for AngularJS routes

更新的代码和工作 plunker 

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.user = {
        user: 'name',
        password: null
    };

    $scope.open = function () {

        $modal.open({
            templateUrl: 'myModalContent.html',
            backdrop: true,
            windowClass: 'modal',
            controller: function ($scope, $modalInstance, $log, user) {
                $scope.user = user;
                $scope.submit = function () {
                    $log.log('Submiting user info.');
                    $log.log(user);
                    $modalInstance.dismiss('cancel');
                }
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            },
            resolve: {
                user: function () {
                    return $scope.user;
                }
            }
        });
    };
};

关于javascript - Angularjs UI 模态表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18935476/

javascriptAngularjsuser39scopetwitter-bootstrapangular-uiangular-ui-bootstrap

有关javascript - Angularjs UI 模态表单的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. ruby-on-rails - 用于 Rails 的 HAML 表单 - 2

    我目前正在尝试将ERB布局转换为HAML。这是我不断收到的错误:index.html.haml:18:syntaxerror,unexpected')'));}\n#{_hamlout.format_...这是HAML页面:.row-fluid.span6%h2TodoList.span6%h2{:style=>"text-align:right;"}document.write(today)%hr.divider.row-fluid.span6%h2.small_headNewTask=render:partial=>'layouts/form_errors',:locals=>{:

  7. ruby-on-rails - 如何在 Rails 中为现有模型生成表单？ - 2

    为现有模型生成单个文件(_form.html.erb)的命令是什么？在Rails3中工作。谢谢。 最佳答案 这听起来可能很傻，但请听我说完……当我想开始清洁时，我自己也做过几次这样的事情。以下是一个脚本，它将读取您的模式并生成必要的生成命令来重现它:require'rubygems'require'active_support/core_ext'schema=File.read('db/schema.rb')schema.scan(/create_table"(\w+)",.*?\n(.*?)\nend/m).eachdo|name

  8. ruby-on-rails - Ruby on Rails : if current page? 是主页，不显示表单 - 2

    我不想显示表单，但前提是当前页面不是主页这是我目前所拥有的...我有我的路线设置:root'projects#index'我的看法:'projects',:action=>'index'))%>showsomestuff如果url是localhost:3000/projects，则不会显示但是它显示了它的localhost:3000所以我需要以某种方式确保它不会显示主页。另外，我有主页的搜索参数，但我仍然不想显示它是否像localhost:3000/projects?search=blahblahblah 最佳答案 使用root_p

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - 在多个页面上使用相同表单的 Rails 最佳实践 - 2

    我正在开发一个Rails2.3.1网站。在整个网站中，我需要一个用于在各种页面(主页、创建帖子页面、帖子列表页面、评论列表页面等)上创建帖子的表单——只要说这个表单需要在由各种Controller)。这些页面中的每一个都显示在相应的Controller/操作中检索到的各种其他信息。例如，主页列出了最新的10篇文章、从数据库中提取的内容等。因此，我已将帖子创建表单移动到它自己的部分中，并将该部分包含在所有必要的页面中。请注意，部分POST中的表单到/questions(路由到PostsController::create——这是默认的Rails行为)。我遇到的问题是当Posts表单没有正

随机推荐