javascript - angularjs - 指令模板未以正确的方式编译

Question

我有 angularjs 的问题

.directive('field', ['$routeParams', function($routeParams){
        return {
            restrict: 'E',
            compile: function(tElement, tAttributes) {
                var template = '<input type="'+tAttributes.type+'" ng-model="form.'+tAttributes.ngModel+'" /> {{form.'+tAttributes.ngModel+'}}';
                tElement.replaceWith(template);
            }
        }
}])

这里我得到了输入值空第二次

{{form.'+tAttributes.ngModel+'}}

我得到了真正的值(value)，!!!

Answer 1

编译用于提供将模板和范围链接在一起的预链接/后链接。因此，您必须在“postLink”中或直接在链接中使用它。这是修改后的示例 - http://jsbin.com/lidufusiga/1/edit?html,js,console,output为了表明您必须在模板上使用 $compile，然后将其链接到范围。

.directive('field', function($compile){
        return {
            restrict: 'E',
            compile: function(tElement, tAttributes) {         
               var template = '<input type="'+tAttributes.type+'" ng-model="form.'+tAttributes.ngModel+'" /> {{form.'+tAttributes.ngModel+'}}';

              console.log(template);

              return function(scope, iElement, iAttrs, controller) {
                iElement.replaceWith($compile(template)(scope));
              };
            }
        };
}

<小时/>

但我不会这样做，相反，我只会提供模板作为函数，您可以在其中以相同的方式执行您正在尝试的操作。

http://jsbin.com/korivokocu/edit?html,js,console,output

  .directive('field', function(){
        return {
            restrict: 'E',
            template: function(tElement, tAttributes) {
                var template = '<input type="'+tAttributes.type+'" ng-model="form.'+tAttributes.ngModel+'" /> {{form.'+tAttributes.ngModel+'}}';

              return template;
            }
        };
});

我想再补充一个意见。我不会尝试封装这样的字段，因为您无法像直接使用输入一样轻松提供验证。也许你有你的理由。