角擦除从里面输入指令

Question

我有指令无效的内容在那里我动态地添加其他指令和属性：

app.directive('lrDatetime', function ($compile) { 
return { 
    restrict: 'AE', 
    require: ["ngModel"], 
    scope: { 
    ngModel: "=", 
    item: "=" 
    }, 
    templateUrl: "template.html", 
    compile: function compile(element, attrs) { 
    var datepicker = element.find(".lr-datepicker"); 

    if (attrs.required === "true") { 
     datepicker.attr("ng-required", "true"); 
    } 

    return { 
     pre: function preLink(scope, iElement, iAttrs, controller) { }, 
     post: function postLink(scope, iElement, iAttrs, controllers) { 
      $compile(iElement.contents())(scope); 
     } 
    }; 
    }, 
    controller: function ($scope) { 
    $scope.opened = false; 
     $scope.open = function ($event, obj, which) { 
      $scope.opened = true; 
     }; 

     $scope.format= "dd.MM.yyyy"; 

    } 
}; 
}); 

而且模板：

<input type="text" 
class="lr-datepicker" 
is-open="opened" 
uib-datepicker-popup="{{format}}" 
datepicker-append-to-body="true" 
ng-model="ngModel" /> 
<span class="input-group-btn"> 
    <button type="button" class="btn btn-default" 
    ng-click="open($event, item, 'isOpened')"> 
     Open 
    </button> 
</span> 

现在，当我有值绑定，并试图输入东西到输入它被擦除。我知道，如果模型是无效的角度将它设置为“未定义”，但如果我会在指令外做同样的事情，它会保持输入的内容。

如果我只是将这些属性移动到模板并删除对$ compile的调用 - 一切都按预期工作。但是这种方法的巨大减少是我无法控制属性外观，它总是会被渲染。

我错过了什么？

Plunker

Answer 1

找到了解决办法 - ngModel属性应手动添加在链接功能$编译之前：

app.directive('lrDatetime', function ($compile) { 
    return { 
     restrict: 'AE', 
     require: ["ngModel", "^form"], 
     scope: { 
     ngModel: "=", 
     item: "=", 
     required: "=", 
     name: "@" 
     }, 
     templateUrl: "template.html", 
     link: function (scope, element, attrs, controllers) { 
     scope.itemForm = controllers[1]; 

     scope.opened = false; 
     scope.open = function ($event, obj, which) { 
      scope.opened = true; 
     }; 

     scope.format= "dd.MM.yyyy"; 

     var datepicker = element.find("input"); 

     if (scope.required === true) { 
      datepicker.attr("ng-required", "true"); 
     } 

     datepicker.attr("name", scope.name); 
     datepicker.attr("ng-model", "ngModel"); 
     datepicker.attr("uib-datepicker-popup", scope.format); 

     $compile(element.contents())(scope); 

    } 
    }; 
}); 

模板：

<input type="text" 
class="lr-datepicker" 
is-open="opened" 
datepicker-append-to-body="true" />  
<span class="input-group-btn"> 
    <button type="button" class="btn btn-default" 
    ng-click="open($event, item, 'isOpened')"> 
     Open 
    </button> 
</span> 
<span ng-if="itemForm[name].$error.required">required!</span> 

Plunker

认为这个问题弹出，因为模板获取com堆积两次，模型重新结合。