Javascript Angular删除指令内输入的无效内容
我有一个指令,动态添加其他指令和属性:Javascript Angular删除指令内输入的无效内容,javascript,angularjs,angular-ui-datepicker,Javascript,Angularjs,Angular Ui Datepicker,我有一个指令,动态添加其他指令和属性: app.directive('lrDatetime', function ($compile) { return { restrict: 'AE', require: ["ngModel"], scope: { ngModel: "=", item: "=" }, templateUrl: "template.html", compile: function compile(element, attrs) {
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>
打开
现在,当我绑定了值并试图在输入中键入一些内容时,它会被删除。我知道,如果model无效,则将其设置为“undefined”,但如果我在指令之外执行相同操作,则会保留输入的内容
若我将这些属性移动到模板并删除$compile调用,那个么一切都会按预期工作。但这种方法的巨大缺点是我无法控制属性的外观,它总是会被渲染
我错过了什么
找到解决方案-在$compile之前,应在link函数中手动添加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>
打开
必修的!
想想这个问题,因为模板被编译了两次,而模型被重新绑定