TOGOUTECH

javascript - Angularjs input[placeholder] 指令与 ng-model 中断

coder 2024-05-16 原文

所以第一天开始使用 angularjs,我不太明白。我正在尝试使用 Angular Directive(指令)模仿 html5 占位符。在我向该字段添加 ng-model 之前,它完全有效,然后它仅在用户与该字段交互并破坏该字段的任何值后才有效。

代码在这里 http://jsbin.com/esujax/32/edit


指令

App.directive('placehold', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var insert = function() {
        element.val(attrs.placehold);
      };

      element.bind('blur', function(){
        if(element.val() === '')
          insert();
      });

      element.bind('focus', function(){
        if(element.val() === attrs.placehold)
          element.val('');
      });

      if(element.val() === '')
        insert();
    }
  }
});

html

<textarea ng-model="comment" placehold="with a model it doesn't work"></textarea>

看起来 super 简单,但我迷路了

最佳答案

只需对您的示例进行少量修改:

app.directive('placehold', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {      

      var value;

      var placehold = function () {
          element.val(attr.placehold)
      };
      var unplacehold = function () {
          element.val('');
      };

      scope.$watch(attr.ngModel, function (val) {
        value = val || '';
      });

      element.bind('focus', function () {
         if(value == '') unplacehold();
      });

      element.bind('blur', function () {
         if (element.val() == '') placehold();
      });

      ctrl.$formatters.unshift(function (val) {
        if (!val) {
          placehold();
          value = '';
          return attr.placehold;
        }
        return val;
      });
    }
  };
});

您可以在这里进行测试:http://plnkr.co/edit/8m54JO?p=preview

不确定,这是最好的解决方案,但它确实有效。即使您键入与占位符属性中相同的文本,它也会检查模型的焦点值。

关于javascript - Angularjs input[placeholder] 指令与 ng-model 中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14777841/

有关javascript - Angularjs input[placeholder] 指令与 ng-model 中断的更多相关文章

  1. c# - .NET:静态方法的推断泛型类型 - 2

    假设我有publicstaticList<T2>Map<T,T2>(List<T>inputs,Func<T,T2>f){returninputs.ConvertAll((x)=>f(x));}privateintSquare(intx){returnx*x;}publicvoidRun(){varinputs=newList<Int32>(newint[]{2,4,8,16,32,64,128,256,512,1024,2048});//thisdoesnotcompilevaroutputs=Map(inputs,S

  2. c# - 如何使用 Angular 读取从我的 API 发送的 header ? - 2

    我在domain.com上有类似于以下代码的内容:$http.post("http://api.domain.com/Controller/Method",JSON.stringify(data),{headers:{'Content-Type':'application/json'}}).then(function(response){console.log(response);},function(response){//somethingwentwrong});}它与我的.NETAPI通信效果很好。response.data拥有我的

  3. c# - 工作中断查询之谜 - 2

    我正在查看我组织中的另一位开发人员在过去几年编写的一些旧代码。在尝试改进这段代码时,我发现它使用的查询有一个非常严重的问题。OdbcDataAdapterfinancialAidDocsQuery=newOdbcDataAdapter(@"SELECTa.RRRAREQ_TREQ_CODE,b.RTVTREQ_SHORT_DESC,a.RRRAREQ_TRST_DESC,RRRAREQ_STAT_DATE,RRRAREQ_EST_DATE,a.RRRAREQ_SAT_IND,a.RRRAREQ_SBGI_CODE,b.RTVTREQ_PERK_MPN_FLAG,b.RTVTRE

  4. c# - 对象的 MVC 模型绑定(bind)列表 - 2

    我在绑定(bind)包含对象列表的模型时遇到问题。当我尝试将数据从Controller传递到View时没有问题,但是当我想将数据发回时,我收到一条消息,指出该方法不存在。我正在使用ajax调用并将$form.serialize()作为数据放入fiddler中,并且可以在fiddler中看到包含所有数据的列表,但我没有成功绑定(bind)。模型是:publicclassSingle{publicintId{get;set;}publicstringName{get;set;}publicList<SimpleDropdown>dddl{get;set;}publicintSe

  5. c# - 复杂模型/子模型验证 (MVC) 的最佳方法 - 2

    问题我知道有很多方法可以在MVC中进行模型验证,并且有很多关于这个主题的文档。但是,我不太确定验证模型属性的最佳方法是什么,“子模型”属于相同类型。请记住以下几点我仍然想利用TryUpdateModel/TryValidateModel方法这些“子模型”中的每一个都有强类型ViewMainModel类有一个强类型View,用于呈现整体显示View这听起来可能有点令人困惑,但我会投入一些代码来澄清。以下类为例:主模型:classMainModel{publicSomeSubModelProp1{get;set;}publicSomeSubModelProp2{get;set;}}一些子模

  6. c# - 自定义模型 Binder 不触发 - 2

    我已经在global.asax中为MyList注册了一个自定义模型联编程序。然而,模型绑定(bind)器不会为嵌套属性触发,对于简单类型它工作正常。在下面的示例中,它会触发Index()但不会触发Index2()Global.asaxprotectedvoidApplication_Start(){AreaRegistration.RegisterAllAreas();ModelBinders.Binders.Add(typeof(MyList),newMyListBinder());WebApiConfig.Register(GlobalConfiguration.Configura

  7. c# - 在 Mono 和 .NET 之间拆分的编译器 #if 指令 - 2

    这个问题在这里已经有了答案:HowcanIconditionallycompilemyC#forMonovs.Microsoft.NET?(2个答案)关闭9年前。我需要为Mac上的Mono和PC上的.NET双重编译一个类库。我想做一些小改动,但我希望使用编译器指令拆分代码。有什么建议吗?

  8. c# - 这个 C# "using"指令是什么? - 2

    我在代码示例中看到了这个C#using语句:usingStringFormat=System.Drawing.StringFormat;这是怎么回事? 最佳答案 这是将类型名称别名为更短的名称。同样的语法也可以用于命名空间的别名。参见usingdirective.(根据理查德更新) 关于c#-这个C#"using"指令是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/quest

  9. c# - 如何在 C# 中扩展数组 - 2

    我必须做一个使用数组的练习。用户必须输入3个输入(每次输入有关项目的信息),这些输入将被插入到数组中。然后我必须显示数组。但是,我很难在不更改其中信息的情况下增加数组的长度;以及如何让用户输入另一组输入?这是我目前所拥有的:publicstringstockNum;publicstringitemName;publicstringprice;string[]items=newstring[3];publicstring[]addItem(string[]items){System.Console.WriteLine("PleaseSirEnterthestocknumber&#

  10. c# - 在 C# 中维护 "clean"using 指令列表有什么好处? - 2

    我知道VS2008和Resharper一样有用于清除using指令的remove和sort功能。除了您的代码“干净”并消除引用将来可能不存在的namespace的问题之外,维护一个“干净”的using指令列表有什么好处?更少的代码?更快的编译时间? 最佳答案 如果您总是只有您需要的using指令,并且总是对它们进行适当的排序,那么当您比较两个版本的代码时,您永远不会看到不相关的更改。此外,如果您有一组简洁的using指令,那么任何查看代码的人都可以通过查看using指令来粗略了解将要使用的内容。

随机推荐

  1. c# - C# 最小化所有打开的窗口 - 2

    我在论坛上看到这个C++代码,它最小化了所有打开的窗口#defineMIN_ALL419#defineMIN_ALL_UNDO416intmain(intargc,char*argv[]){HWNDlHwnd=FindWindow("Shell_TrayWnd",NULL);SendMessage(lHwnd,WM_COMMAND,MIN_ALL,0);Sleep(2000);SendMessage(lHwnd,WM_COMMAND,MIN_ALL_UNDO,0);return0;}如何在C#.net中访问FindWindow和SendMessageAPI函数以及HWN

  2. c# - 在 C# 下,try、throw 和 catch block 对性能的影响有多大 - 2

    首先声明:我有使用其他语言的经验,但仍在学习C#的精妙之处关于问题...我正在查看一些代码,它以我关心的方式使用try/catchblock。当调用解析例程时,程序员没有返回错误代码,而是使用了以下逻辑catch(TclExceptione){thrownewTclRuntimeError("unexpectedTclException:"+e.Message,e);}这被调用者捕获,抛出相同的错误......被调用者捕获,抛出相同的错误........被调用者捕获,抛出相同的错误......备份大约6个级别。我是否认为所有这些catch/throwblock都导致了性

  3. c# - 将 ICollection<T> 转换为 List<T> - 2

    我正在尝试使用以下代码将ICollection转换为List-ICollection<DataStructure>list_Stuctures=dataConnectorService.ListStructures(dataConnector,SupportedDataStructures.All);List<DataStructure>lst_DataStructure=newList<DataStructure>();list_Stuctures.CopyTo(lst_DataStructure);在最后一行,我得到以下异常-Exception=

  4. c# - WPF 在第二个窗口打开时禁用主窗口,直到它关闭 - 2

    我有一个WPF应用程序,它有一个主窗口和一个可以从主窗口中的按钮打开的第二个窗口。我希望主窗口被禁用,而第二个窗口在VisualStudio中作为“关于”窗口打开。 最佳答案 试试这个ShowDialogmethod而不是Show将第二个窗口作为对话框打开。您有一个已经带有窗口的WPF项目。这个应用应该可以运行。右键单击项目并添加新窗口。您将其命名为Window1.xaml您现在会注意到Window1.xaml和Window1.xaml.cs添加到您的项目中。(窗口的类名是Window1,它位于.xaml.cs文件中,它派生自Win

  5. c# - ASP.NET Gridview 中没有时间的日期格式 - 2

    在ASP.NETgridview中绑定(bind)两个日期。我想显示dd/MM/yyyy但它显示10/03/201400:00:00。<asp:TemplateFieldHeaderText="Fromdate"><ItemTemplate><asp:LabelID="lblFromDate"runat="server"DataFormatString="{0:dd/MM/yyyy}"HtmlEncode="false"Text='<%#Eval("Fro

  6. c# - 如何在 C# 中使用正则表达式解析 OData $filter? - 2

    您好,我想知道在C#中解析OData$filter字符串的最佳方法是什么,例如/API/organisations?$filter="nameeq'Facebook'ornameeq'Twitter'andsubscribersgt'30'"应返回名称为Facebook或Twitter且拥有超过30个订阅者的所有组织。我已经研究了很多但找不到任何不围绕WCF的解决方案。我正在考虑使用Regex并将它们分组,所以我有一个列表过滤器类使得:FilterResource:NameOperator:EqValue:FacebookFilterResource:NameOperator:EqVa

  7. c# - 序列化json时如何忽略JsonProperty(PropertyName = "someName")? - 2

    我有一些使用ASP.NetMVC的C#代码,它使用Json.Net来序列化一些DTO。为了减少负载,我使用[JsonProperty(PropertyName="shortName")]属性在序列化期间使用较短的属性名称。当客户端是另一个.Net应用程序或服务时,这非常有效,因为反序列化将对象层次结构重新组合在一起,使用更长更友好的名称,同时保持较低的实际传输负载。当客户端通过浏览器使用javascript/ajax时,问题就出现了。它发出请求,并获取json...但json使用的是缩短的不太友好的名称。如何让json.net序列化引擎以编程方式忽略[JsonProperty(Prop

  8. c# - Rfc2898/PBKDF2 与 SHA256 作为 c# 中的摘要 - 2

    我想在C#中使用Rfc2898来导出key。我还需要使用SHA256作为Rfc2898的摘要。我找到了Rfc2898DeriveBytes类,但它使用SHA-1,而且我看不出有什么方法可以让它使用不同的摘要。有没有办法在C#中使用Rfc2898并将SHA256作为摘要(除了从头开始实现)? 最佳答案 .NETCore有一个新的Rfc2898DeriveBytes实现。CoreFXversionnolongerhasthethehashingalgorithmhard-codedThecodeisavailableonGithub.它

  9. c# - 具有领域驱动设计的存储库模式会成为反模式吗? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭9年前。社区在4个月前审查了是否重新打开此问题,然后将其关闭:原始关闭原因未解决Improvethisquestion首先,我想澄清一下,我是领域驱动设计的新手,我问这个问题是因为我读过一些叫做贫血领域模型的东西。大多数时候我在使用Repository模式时会看到以下内容。我们有一个通用存储库我们的模型只包含一组公共(public)属性,但不包含任何方法(因此根据DDD的定义,它变成了贫血领域模型),因为这里的存储库类处理该实体或模型

  10. c# - 如何将 "zip"或 "rotate"列为可变数量的列表? - 2

    如果我有一个包含任意数量列表的列表,如下所示:varmyList=newList<List<string>>(){newList<string>(){"a","b","c","d"},newList<string>(){"1","2","3","4"},newList<string>(){"w","x","y","z"},//...etc