AngularJS指令运行时模板更改

Question

AngularJS指令运行时模板更改

3

我一直在尝试创建一个输入指令，允许不同的输入类型（例如间隔（最小-最大），日期时间，数字，文本...）。无论用户何时更改数据类型，都非常重要对应的输入更改其模板。我还需要能够在页面上有多个输入（请参见PLUNKR以更好地理解）。

经过很多试验和研究，我得出结论，我需要观察属性（great-input），根据所选输入类型的值替换我的输入模板，并编译它。但是我无法在编译函数中执行此操作，而我的监视器在链接函数中无法正常工作（我正在获取t1，t2）。

因此，我需要做的是，在选择类型的值更改时，更改输入的模板（为简单起见，我只是对不同的输入类型进行了颜色编码）。

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

这基本上是应该完成工作的函数（根据实现位置可能会有一些更改），但我找不到正确的位置。

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

- lexluthor1391

可能是重复的问题：AngularJS - Directive template dynamic - Manish Kr. Shukla

@TechMa9iac，你能详细说明一下吗？我遇到了这个问题，但是在那里找不到我需要的东西。我再次深入研究了一下，但我仍然无法看出如何在我的情况下使用接受答案中的jsbin。我是否漏掉了什么？ - lexluthor1391

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- New Dev · Accepted Answer

目前来看，最简单的方法是在指令模板中使用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
    }
  }
});