Angularjs 以角度表示的Wrap-exist指令

我在我的应用程序中使用angular 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>

但是，它不能像预期的那样工作，自定义的ed元素

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

不会将标签插入模板，也不会生成标签：

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

我认为

编译

和

链接

可能是必要的，但我不知道如何实现它们

这是最新的

---

有可能修复它吗？

从Angular 1.3开始，不推荐使用Replace

但它是有效的：

您可以做的是（由于不推荐），创建一个自定义元素：

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

定义为：

var myApp=angular.module（'myApp'，[]）

myApp.directive（“customLabel”，函数（）{ 返回{ 限制：“E”， 模板：'标签是：{{vm.label}}'， controllerAs:'vm'， 作用域：{label:'@'}， bindToController：对， 控制器：函数（）{} }; });

---

请参阅：

我更新了它，请检查一下。

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

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

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