角模板答案 - 爱码网

【问题标题】：Angular templates角模板
【发布时间】：2016-02-15 00:07:07
【问题描述】：

我想知道这个：

<field>
  <input type="text" value="" />
  <error>ERROR !!!</error>
</field>

可以转换成这个：

<!-- field directive is transformed into div.field-container -->
<div class="field-container">
    <div class="field">
        <!-- input here -->
        <input type="text" value="" />
    </div>
    <div class="error">
        <!-- error directive is transformed into span -->
        <span>ERROR !!!</span>
    </div>
</div>

谢谢

【问题讨论】：

您需要使用 ngShow 或其他一些角度逻辑来控制何时显示错误。
我的问题不太准确。困难在于在字段指令模板中“重新排列”输入和错误元素。我不知道如何获取兄弟节点并分别放在不同的地方。（我不知道我是否清楚！！！）

标签： javascript angularjs web frontend

【解决方案1】：

您可以使用角度指令来实现：

var app = angular.module('myapp', []);

app.directive('errorDirective', function() {
  return {
      restrict: 'E',
      replace: 'true',
      template: '<div class="error"><span>ERROR !!!</span></div>'
  };
});

这是一个工作示例：http://jsfiddle.net/fLddpk75/

文档：https://docs.angularjs.org/guide/directive

【讨论】：