angularjs - 指令模板没有以正确的方式编译

时间:2015-10-29 11:29:56

标签: javascript html angularjs

我对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);
            }
        }
}])

这里我得到输入值击球第二次

  

{{形式。 '+ tAttributes.ngModel +'}}

我得到了真正的价值,!!!

1 个答案:

答案 0 :(得分: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;
            }
        };
});

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