Question

我一直在尝试创建一个输入指令，允许不同的输入类型（例如Interval（min-max），DateTime，Number，Text ...）。非常重要的是，每当用户更改数据类型时，相应的输入都会更改其模板。我还需要能够在页面上有多个输入（请参阅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-if并绑定范围上的输入类型：

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

AngularJS指令运行时模板更改

1 个答案: