Question

我在我的应用程序中使用角度js，我有一个包含很多字段的表单：

<form>
  <div class="form-group">
    <label for="idname">Name:</label>
    <input type="name" class="form-control" id="idname" ng-model="name" name="name">
  </div>
  <div class="form-group">
    <label for="idemail">Email Address:</label>
    <input type="password" class="form-control" id="idemail" ng-model="email" name="email">
  </div>
  <div class="form-group">
    <label for="idtype">Choose Type:</label>
    <select class="form-control" id="idtype" name="type">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

有近60多个文件，大多数标记都是相关的引导样式，所以我想简化标记，如下所示：

<form>
    <input label="Name:" type="text" model="name">
    <input label="Email Address:" type="email" model="email">
    <select label="Choose Type:" model="type">
        ....
    </select>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

我想为表单输入添加一些额外的属性，如label和model，然后我将生成标签和输入元素，并用引导样式包装它们。此外，我希望第三个指令，如min-length或其他任何指令仍然有效。

我试图像这样创建指令：

  .directive('label', function() {
    return {
      priority:1,
      restrict: 'A',
      templateUrl: "field.html",
      replace:true
    };
  })

然而，它没有按预期工作，像

这样的自定义元素

<input label="Name:" type="text" model="name">

未插入模板，并且未生成标签：

  <div class="form-group">
  </div>

我认为compile和link可能是必要的，但我不知道如何实施它们。

这是demo。

是否可以修复它？

Answer 1

自Angular 1.3以来，不推荐使用Replace。

但它有效：https://jsfiddle.net/basslagter/yh0qdbhL/1/

你可以做什么（因为弃用）是一个自定义元素：

<custom-label label="Name:" type="text" model="name"></custom-label>

定义为：

var myApp = angular.module（＆＃39; myApp＆＃39;，[]）;

myApp.directive("customLabel", function () {
    return {
        restrict: "E",
        template: '<label>The label was: {{vm.label}}</label>',
        controllerAs: 'vm',
        scope: { label: '@' },
        bindToController: true,
        controller: function(){}
    };
});

请参阅：https://jsfiddle.net/basslagter/yh0qdbhL/

以角度包装存在指令

1 个答案: