Javascript AngularJS指令运行时模板更改

我一直在尝试制作一个输入指令，它允许不同的输入类型（例如Interval（minmax）、DateTime、Number、Text…）。非常重要的是，每当用户更改数据类型时，相应的输入都会更改其模板。我还需要能够在页面上有多个输入（请参阅以更好地理解）

经过反复试验和研究，我得出了一个结论：我需要观察属性（很棒的输入），根据所选输入类型的值替换输入的模板，并编译它。但我不能在编译函数中完成，并且我的手表在链接函数中不能正常工作（我得到t1，t2）

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

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

完成以下代码：

---

到目前为止，最简单的方法是在指令模板中使用

ng if

s，并在范围上绑定输入类型：

.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
    }
  }
});

.directive（“greatInput”，function（））{
返回{
模板：'\
\
',
范围：{
greatInputModel:“=”，
greatInputType:“@”，
//等等。。。
},
链接：功能（$scope）{
$scope.isStr=函数（）{
返回$scope.greatInputType==“5”| | someotherCondition（）；
}
//与$scope.isInt和$scope.isDbl相同
}
}
});

TechMa9iac可能重复，您能详细说明一下吗？我碰到了那个，在那里我找不到我需要的东西。我再次深入研究了它，这次我仍然没有看到如何在我的案例中使用已接受答案中的jsbin。有什么我遗漏的吗？这是一个非常晚的答案，但它可能会帮助任何人研究它。您提供的解决方案是可行的，但我们有一些用于不同输入类型的大型模板，因此我们最终使用了我问题中的代码。我们遇到的问题是依赖注入。当时，我们对棱角分明的人不是很有经验。我相信我们添加了一个额外的不必要的依赖项，这导致了一个错误。

.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
    }
  }
});