草庐IT

javascript - AngularJS-ng :model - Field is readonly when bound to $q promise?

coder 2024-05-16 原文

我试图从 AngularJs (1.0.7) 中的 promise 返回单个记录并将结果绑定(bind)到表单。表单正确绑定(bind),但输入字段是只读的 - 我无法编辑值。

如果我改为将记录包装在一个数组中并使用 ng:repeat 进行迭代,则表单会正确绑定(bind)并且我可以编辑值。

我创建了一个 plnkr 来清楚地展示这个问题:

http://embed.plnkr.co/fOWyhVUfekRbKUSRf7ut/preview

您可以编辑直接绑定(bind)和列表绑定(bind)的输入字段,但是不能编辑绑定(bind)到单个 promise 的字段。

是否可以将 ng:model 直接绑定(bind)到从 promise 返回的对象,或者我是否需要使用数组来让它工作?

app.controller('MainCtrl', function($scope, $timeout, $q) {

  var person = {"name": "Bill Gates"}

  var deferList = $q.defer();
  var deferSingle = $q.defer();

  // Bind the person object directly to the scope. This is editable.
  $scope.direct = person;       

  // Bind a promise to the scope that will return a list of people. This is editable.
  $scope.list   = deferList.promise;

  // Bind ap romise to the scope that will return a single person record. This is *not* editable.
  $scope.single = deferSingle.promise;

  // Resolve the promises
  $timeout( function(){
    deferList.resolve( [person] );  // Array
    deferSingle.resolve( person );  // Just the record itself
  }, 100);


});


<body ng-controller="MainCtrl">
    Directly Bound - This field is editable
        <input ng:model="direct.name"/>
    <hr/>
    Singleton Promise - This field is *not* editable.
        <input ng:model="single.name"/>    
    <hr/>
    List Promise: - This field is editable
        <div ng:repeat="person in list">
            <input ng:model="person.name"/>  
        </div>

 </body>

编辑:经过一些调试后,我发现 ng:model 指令正在读取 promise 的值 ('$$v') 组件,但直接写入 promise 对象本身。

尝试编辑 promise 时,ViewModel 会不断恢复为原始值,同时将字符存储在 promise 本身上。因此,如果用户在输入字段中键入“asdf”,结果将如下所示。

{Name: "Asdf", $$v: {Name: "Bill Gates"}}

而我们应该期待

{$$v: {Name: "asdf"}}

我是不是做错了什么,或者这可能是 AngularJS 中的一个错误?

(为了进一步澄清,问题在于 Promise 返回的 Array 和 Object 之间的行为差​​异。直接绑定(bind)只是作为控件存在)

最佳答案

更新

这个问题似乎是 AngularJS 1.0.3 引入的: http://jsfiddle.net/sonicsage/k8W4Y/6/

如果你切换到 AngularJS 1.0.2,它会工作。

GitHub 上有一个 Unresolved 问题:https://github.com/angular/angular.js/issues/1827

Google Groups 上的原始线程.

这里还有一个关于自动展开的有趣话题: https://github.com/angular/angular.js/pull/1676


通过在 Chrome 控制台调试应用程序,可以看到 single 是一个函数(promise):

> $('body.ng-scope').data('$scope').single
Object {then: function, $$v: Object}
$$v: Object
then: function (b,g){var j=e(),h=
__proto__: Object

虽然 direct 是一个对象:

> $('body.ng-scope').data('$scope').direct
Object {name: "Bill Gates", $$hashKey: "004"}

但是,在只读输入上按下按键,对promise有影响,比如全选文本删除,虽然对UI没有影响,但是有影响在属性上:

> $('body.ng-scope').data('$scope').single.name
""

您可以在此处进一步调试应用程序:http://run.plnkr.co/plunks/rDo7bFZlBq4rRH2ZNJn1/

编辑

不支持 IMO 直接绑定(bind)一个 promise 到一个字段(这有正式记录吗?),按如下方式更改代码将起作用:

// Bind ap romise to the scope that will return a single person record. This is *not* editable.
  deferSingle.promise.then(function(data) {
      $scope.single = data;  
  }, function(data) {
      // error
  });

这是 plunker:http://run.plnkr.co/plunks/rDo7bFZlBq4rRH2ZNJn1/

关于javascript - AngularJS-ng :model - Field is readonly when bound to $q promise?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16883239/

有关javascript - AngularJS-ng :model - Field is readonly when bound to $q promise?的更多相关文章

  1. ruby-on-rails - rails : keeping DRY with ActiveRecord models that share similar complex attributes - 2

    这似乎应该有一个直截了当的答案,但在Google上花了很多时间,所以我找不到它。这可能是缺少正确关键字的情况。在我的RoR应用程序中,我有几个模型共享一种特定类型的字符串属性,该属性具有特殊验证和其他功能。我能想到的最接近的类似示例是表示URL的字符串。这会导致模型中出现大量重复(甚至单元测试中会出现更多重复),但我不确定如何让它更DRY。我能想到几个可能的方向...按照“validates_url_format_of”插件,但这只会让验证干给这个特殊的字符串它自己的模型,但这看起来很像重溶液为这个特殊的字符串创建一个ruby​​类,但是我如何得到ActiveRecord关联这个类模型

  2. ruby-on-rails - rails : check if the model was really saved in after_save - 2

    ActiveRecord用于在每次调用保存方法时调用after_save回调,即使模型没有更改并且没有生成插入/更新查询也是如此。这实际上是默认行为。在大多数情况下这没问题。但是一些after_save回调对模型是否实际保存的事情很敏感。有没有办法确定模型是否实际保存在after_save中?我正在运行以下测试代码:classStage 最佳答案 ActiveRecordusetocallafter_savecallbackeachtimesavemethodiscalledevenifthemodelwasnotchangedan

  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 - 工厂女孩/Rails : Generator to create a factory for existing model? - 2

    我在我的Rails项目中使用rspec_rails和factory_girl_railsgem。所有模型都已创建。是否有我可以运行的生成器来为现有模型创建工厂文件?例如:我已经有了一个Blog模型。RSpec允许我通过简单地运行以下命令在spec/models/blog_spec.rb生成一个模型规范文件:railsgeneraterspec:modelblog是否有我可以在命令行中运行的生成器,它会为这个现有模型生成工厂文件,位于:spec/factories/blogs.rb?我在factory_girl_rails中没有看到任何关于发电机的提及文档。

  5. ruby-on-rails - ruby rails : two references with different name to the same model - 2

    我的应用程序有一个名为User的模型(它包括电子邮件地址、用户名……)我想创建一个模型Message它应该有两个字段sender和recipient。两者都是对User模型的引用。我试过这个:railsgeneratemodelMessagesender:referencesrecipient:referencesRails生成了这个:classMessage但我不想要两种不同的模型。这两个字段都应引用User。我正在运行Ruby2.0.0和Rails4.0.2。非常感谢任何帮助。如果您需要有关我的问题的更多信息,请询问我。 最佳答案

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

  7. ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时,没有路由匹配 [OPTIONS] "/users" - 2

    尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg

  8. ruby-on-rails - NilClass :Class 的 Rails 未定义方法 `model_name' - 2

    我有一个表单,我想出现在每个页面的顶部,所以我将它包含在/app/views/layouts/application.html.erb文件中,但我收到错误undefinedmethodmodel_name'forNilClass:Class`尝试加载页面时。这是application.html.erb中的表单片段Addnewcontact这是我的/app/controllers/user_controller.rbclassUserController我认为我遇到了这个错误,因为表单位于application.html.erb文件中,我需要以某种方式指定路径,但话又说回来,我对Rail

  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 - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss? - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中,html表单使用tinymce将“content”列设置为textarea字段。在首页,因为使用了tinymce,post.html.erb的代码需要用这样的原始方法来实现。.好的,现在如果我关闭浏览器javascript,这个文本区域可以在没有tinymce的情况下输入,也许用户会输入任何xss,比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中,但sanitize方法将相互过滤tinymce样式。例如

随机推荐