Question

F.e。对于html元素我可以做$.after()，我想做一些像指令。

现在我有代码

HTML

<input ng-model="job.position" ng-class="{inputError: job.errors.position}" ng-change="job.errors.position=false">
<errortooltip error="job.errors.position">
...
<script type="text/ng-template" id="error-tooltip.tpl">
   <div class="inputTooltipError" ng-show="error">
      <div class="inputTooltipErrorText">
          {{ error }}
      </div>
   </div>
</script>

JS

.directive('errortooltip', function() {
    return {
      restrict: 'E',
      scope: {
        error: '=error'
      },
      templateUrl: 'error-tooltip.tpl'
    };

但是我希望简化它并将errortooltip仅添加到将替换ng-class，ng-change和自定义指令的输入中，并在输入后添加一块模板

 <input ng-model="job.position" errortooltip="job.errors.position">

Answer 1

最简单的答案是将指令更改为属性指令，其模板看起来与您想要的一样。然后，您只需replace现有输入，模板中正确设置的输入也会在其后面显示工具提示。

所以你的最终HTML看起来就像你描述的那样（尽管你可以将job.position和job.errors.position压缩成一个job param）

 <input ng-model="job.position" errortooltip="job.errors.position">
 //or
 <input errortooltip="job">

然后将您的指令更改为包含所需模板的属性指令。如果我使用单job个参数，它可能看起来像

directive('errortooltip', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      job = '=errortooltip'
    },
    templateUrl: 'error-tooltip-input.tpl'
};

，您的新模板error-tooltip-input.tpl将是

<input ng-model="job.position" ng-class="{inputError: job.errors.position}" ng-change="job.errors.position=false">
<errortooltippopup error="job.errors.position">

其中errortooltippopup是一个与现有error-tooltip.tpl具有相同模板的指令。

如何在elements.之后的angular.js中添加模板片段到指令

1 个答案: