AngularJS 指令运行时模板更改

Question

我一直在尝试制作一个输入指令，它允许不同的输入类型（例如间隔（最小-最大）、日期时间、数字、文本...）。非常重要的是，每当用户更改数据的类型时，相应的输入就会更改其模板。我还需要能够在页面上有多个输入（请参阅PLUNKR 以更好地理解）。

经过大量的反复试验和研究，我得出一个结论，我需要观察属性（大输入），根据所选输入类型的值替换我输入的模板，然后编译它。但我无法在编译功能中执行此操作，并且我的手表在链接功能中无法正常工作（我得到 t1，t2）。

所以，我需要做的是，在更改 select(type) 中的值时，更改输入模板（为简单起见，我只是对不同的输入类型进行了颜色编码）。

$scope.$watch('greatInput', function (newVal) {
     console.log(newVal);
     html = getTemplate(newVal);
     $elem.html('').append($compile(html)($scope));
});

这几乎是应该完成工作的函数（根据实现的位置进行了一些更改），但我找不到合适的位置。

完整代码： http://plnkr.co/edit/BCuiqg?p=preview

Answer 1

到目前为止，最简单的方法是在指令模板中使用ng-ifs 并将输入类型绑定到范围：

.directive("greatInput", function(){
  return {
    template: '<input ng-if="isStr()" type="txt"    ng-model="greatInputModel">\
               <input ng-if="isInt()" type="number" ng-model="greatInputModel">\
               <input ng-if="isDbl()" type="number" ng-model="greatInputModel">',
    scope: {
      greatInputModel: "=",
      greatInputType: "@",
      // etc...
    },
    link: function($scope){
       $scope.isStr = function(){
          return $scope.greatInputType === "5" || someotherCondition();
       }
       // same for $scope.isInt and $scope.isDbl
    }
  }
});