草庐IT

javascript - AngularJS 自定义指令 $watch 不工作

coder 2023-08-05 原文

我正在创建一个演示应用程序，其中有两个 Controller 通过包含一些数据的服务进行通信。它是一种通讯簿。用户可以编辑从列表中选择的人。

数据存储在对象数组中，我使用自定义指令对该对象的文本属性执行一些操作。

问题是使用自定义指令呈现在列表中的文本不会在模型更改时更新(在名称字段中键入内容时)，而使用 {{}} 放置的文本在键入时会更改。

这是一个显示问题的示例:

js

var contacts = angular.module('contacts', []);

contacts.service('database', ['$rootScope', function ($rootScope) {
  return {
    db : [
    {person:{fName:"John", lName:"Williams"}, phone:"11111111111"},
    {person: {fName:"Sara", lName:"Lewis"}, phone:"222222222"},
    {person: {fName:"Lana", lName:"Watson"}, phone:"33333333333"},
    {person: {fName:"John", lName:"Smith"}, phone:"4444444444"}  
    ],  
    selectedPerson : null,
    setSelected : function (i) {
      this.selectedPerson = i;
      $rootScope.$broadcast('selected');
    }
  }
}]);

 contacts.controller("listCtrl", function($scope, database) {
  $scope.list = database.db;
  $scope.getSelected = function() {
    return database.selectedPerson;
  };
  $scope.setSelected = function(i) {
    database.setSelected(i);
  }; 
});

contacts.controller("editorCtrl", function($scope, database) {
  $scope.editing = database.selectedPerson;
  $scope.$on('selected', function(event) {
    $scope.editing = database.selectedPerson;
  });
});

contacts.directive('personName', function() {
  return {
    restrict: 'AEC',
    scope:{
      personName: '='
    },
    link: function(scope, elem, attrs) {
      scope.$watch(function(){return scope.personName;}, function(obj) {
        var fullName = obj.fName + " " + obj.lName;
        elem.text(fullName);
      });
    }
  };
});

html

<div ng-app="contacts">
  <div class='list' ng-controller="listCtrl">
    <div ng-repeat="i in list"
      ng-click="$parent.setSelected(i)"
      ng-class="{'sel': ($parent.getSelected() === i)}">
      <span person-name="i.person"></span>, {{i.phone}}
    </div>
  </div>
  <div class='edit'  ng-controller="editorCtrl">
    First name: <input type="text" ng-model='editing.person.fName'> <br>
    Last name: <input type="text"  ng-model='editing.person.lName'> <br>
    Phone: <input type="text"  ng-model='editing.phone'> <br>
  </div>
</div>

工作演示:http://cssdeck.com/labs/ejnhuqf9

也许问题出在 $watch 上，但似乎一切正常。有什么建议么？

附言在实际应用程序中，我需要使用该指令来执行比连接更复杂的文本操作。

最佳答案

设置$watch的第三个参数(objectEquality) 为真:

  scope.$watch(function(){return scope.personName;}, function(obj) {
    var fullName = obj.fName + " " + obj.lName;
    elem.text(fullName);
  }, true);

您可能想将属性的名称更改为 person，以提醒自己这是整个对象，而不仅仅是字符串名称。

关于javascript - AngularJS 自定义指令 $watch 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23050807/

自定javascript34functionscopehtmlangularjsangularjs-directive

有关javascript - AngularJS 自定义指令 $watch 不工作的更多相关文章

  1. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  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 - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  6. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  7. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  8. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  9. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  10. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

随机推荐