Javascript Angularjs指令访问容器元素的属性_Javascript_Angularjs_Angularjs Directive

Javascript Angularjs指令访问容器元素的属性

javascript angularjs

Javascript Angularjs指令访问容器元素的属性,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我试图制定一个指令，自动将标签添加到输入字段中，因此我试图实现的是：  <label-input label="some label:" id="some-random-id"> <input type="text" maxlength="5" /> </label-input> 并将其转换为：  <label for="some-random-id">

我试图制定一个指令，自动将标签添加到输入字段中，因此我试图实现的是：

<!-- angular -->
<label-input label="some label:" id="some-random-id">
  <input type="text" maxlength="5" />
</label-input>

并将其转换为：

<!-- html -->
<label for="some-random-id">
  some label: <input id="some-random-id" type="text" maxlength="5" />
</label>

<label for="some-random-id-1231231"></label><input type="text" id="some-random-id-1231231" />


一些标签：

我已经走了这么远，但我不明白你应该如何修改通过转换添加的元素，或者你是否应该修改

app.directive('labelInput', function () {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      id: '@',
      label: '@',
    },
    template: '<label for="{{id}}">{{label}}</label><span ng-transclude></span>',
  };
});

app.directive（'labelInput'，函数（）{
返回{
限制：'E'，
是的，
范围：{
id:“@”，
标签：“@”，
},
模板：“{label}}”，
};
});

我主要担心的是我不想写两次id，如果id没有通过，最好是自动生成，也就是：

<label-input><input type="text" /></label-input>

转换为：

<!-- html -->
<label for="some-random-id">
  some label: <input id="some-random-id" type="text" maxlength="5" />
</label>

<label for="some-random-id-1231231"></label><input type="text" id="some-random-id-1231231" />

您可以在指令中添加一个链接函数，在该函数中您可以（并且应该）修改和/或控制指令的行为及其DOM表示。欲了解更多信息，请访问

给定以下标记：

<body ng-app="myModule">
    <div>
        <label-input label="some label with a given id:" id="some-random-id">
              <input type="text" maxlength="5" />
        </label-input>
    </div>
    <div>
        <label-input label="another label with a random id:">
              <input type="text" maxlength="5" />
        </label-input>
    </div>
</body>

根据您的需要执行的指令可能如下所示：

var app = angular.module('myModule', [])
app.directive('labelInput', function () {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      id: '@',
      label: '@',
    },
    template: '<label for="{{id}}">{{label}}</label><span ng-transclude></span>',
    link: function (scope, element, attrs) {
        scope.id = attrs.id || 'input-id-'+ new Date().getTime().toString()
        element.find('input').attr('id', scope.id);
    }
  }});

var-app=angular.module（'myModule'，[]）
应用指令（'labelInput'，函数（）{
返回{
限制：'E'，
是的，
范围：{
id:“@”，
标签：“@”，
},
模板：“{label}}”，
链接：函数（范围、元素、属性）{
scope.id=attrs.id | |“输入id-”+新日期（）.getTime（）.toString（）
元素find（'input'）.attr（'id'，scope.id）；
}
}});

小提琴：

请注意，id生成远远不是防弹的

编辑：根据下面评论中的要求扩展
不加掩饰：

app.directive('labelInput', function () { return { restrict: 'E', scope: { id: '@', label: '@', }, link: function (scope, element, attrs) { scope.id = attrs.id || 'input-id-'+ new Date().getTime().toString() element.prepend('<label for="'+scope.id+'">'+scope.label+'</label>'); element.find('input').attr('id', scope.id) } }});

app.directive（'labelInput'，函数（）{ 返回{ 限制：'E'，范围：{ id:“@”，标签：“@”， }, 链接：函数（范围、元素、属性）{ scope.id=attrs.id | |“输入id-”+新日期（）.getTime（）.toString（）元素。前置（“”+范围。标签+“”）；元素.find（'input'）.attr（'id'，scope.id） } }});
回答得很好！还有一个简短的问题，你知道我如何绕过添加标签，让angular在标签标签后面添加内容吗？这正是
ng transclude
指令的目的。但是，只需通过
angular.element
预先添加标签标记，就可以省略transclude标记。更新了我的答案。