为Angular指令创建的元素创建名称

对于我正在处理的项目，我创建了UI Bootstrap日历小部件的简化版本。为Angular指令创建的元素创建名称

Plunker of my Simplified Calendar, and how I'm using it, is here.

的UI引导日历的一个有趣的方面是，尽管它去到input[text]，它仍然会产生在$error字典中的date验证的表单控制器，就好像我已经指定了我的DOM中有input[date]元素。

然而，有很多子捕获的渔获。在我的plunker的DOM中马上会注意到的一件事情是，当给定的日期字段不是实际的日期时，我已经指定了错误跨度（尝试输入一些荒谬的东西，比如'cat'作为值！）如果你输入了一些东西不是日期，那些应该出现，但他们没有。

我试过几件事情要暴露标记创建于母公司的名称字段：

$transclude设置为false，使得<calendar></calendar>标签获得与calendar指令的内容替换模板，并指定name属性。这个“有效”，除了所述输入被包装在具有使用Bootstrap样式框架来看起来正确的类的跨度中。
直接创建在calendar指令的输入域的name属性与绑定，像这样*：

app.directive('mustPrecedeDate', [ function() { return { restrict: 'E', template: '<input type="text" name="{{ someName }}" />', scope: {}, controller: 'calendarCtrl', link: function() {} }; } };
写link代码明确查找输入那就是calendar生成的标记的孩子，并为其分配一个name属性。双方2和3次失败，因为很明显这不是真正的东西，可以做

这导致了我的问题（我找不到SO疑问的是，发现的来源。）：在我可以通过什么方式获取输入元素的名称，以便将验证结果报告给$error字典，以便我可以为用户提供有用的验证消息？

*：显然，'左边四个空格'的代码块在编号列表中表现不好，所以我不得不使用反引号代码表示法来正确地中间格式化文本。如果我没有发现SO使用的降价设置中的错误，请随时纠正我的格式。

来源

2014-11-05 Andrew Gray

＃3的东西需要尝试有点难！

我能够通过添加以下代码到我的链接功能让输入一个名字：

var inputElement = elem.find('input'); 
inputElement.attr('name', inputName);

...其中inputName从属性列表刮掉。通过使用如下的compile函数，我能够将inputName降至生成的input[text]字段。

app.directive('calendar', [ 
    function() { 
     return { 
      restrict: 'E', 
      transclude: false, 
      scope: {}, 
      template: 
       '<span class="input-group">' 
        + '<input class="form-control" required ' 
         + 'type="text" placeholder="MM/dd/yyyy" ' 
         + 'data-ng-model="dt" data-ng-click="toggle($event)" ' 
         + 'data-ng-change="updateParentProperty()" ' 
         + 'datepicker-popup="MM/dd/yyyy" is-open="isOpen" />' 
        + '<span class="input-group-btn">' 
         + '<button type="button" class="btn btn-default" data-ng-click="toggle($event)">' 
          + '<i class="fa fa-calendar"></i>' 
         + '</button>' 
        + '</span>' 
       + '</span>', 
      controller: 'calendarCtrl', 
      compile: function(elem, attrs) { 
       var inputName = attrs.inputName; 

       var inputElement = elem.find('input'); 
       inputElement.attr('name', inputName); 

       // Compile returns a Link function! 
       return function(scope, elem, attrs, ctrl) { 
        var modelName = attrs.ngModel; 

        scope.parentProperty = modelName; 
        scope.dt = scope.$parent[modelName]; 
       }; 
      } 
     }; 
    } 
]);

来源

2014-11-05 22:45:16

为Angular指令创建的元素创建名称

回答

相关问题