尝试将指令添加到具有动态ID的输入时,链接方法无法正确绑定到该对象.给出以下jsfiddle或html:
<div ng-app="myApp" ng-controller="MyCtrl">
<p>Date: <input type="text" id="datepicker-{{id}}" datepicker></p>
</div>
和js:
var module = angular.module('myApp', []);
module.directive('datepicker', function() {
var linker = function(scope, element, attrs) {
element.datepicker();
}
return {
restrict: 'A',
link: linker
}
});
function MyCtrl($scope) {
$scope.id = 7
}
我在控制台调试器上看到的是,当调用链接时,它会将id显示为"datepicker - {{id}}"而不是"datepicker-7".
有没有办法强迫这种情况发生？实现这个的更好方法是什么？
更新:应该澄清一下.单击时会显示日期选择器,但单击日期不起作用.我收到错误:"此datepicker的未捕获的实例数据"
我正在尝试在我的AngularJS应用程序中使用jQuery datepicker,但是我收到以下错误消息:
jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function"
我正在使用这个答案的代码: 与Angularjs的jQuery ui datepicker
这是同一个答案的工作小提琴:http: //jsfiddle.net/kevinj/TAeNF/2/
这是我正在使用的完整代码:
<html>
<head>
<script src="/js/angular.min.js"></script>
<script src="/lib/jquery/jquery-1.12.0.min.js"></script>
<script src="/lib/jquery/jquery-ui-1.11.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/jquery/jquery-ui-1.11.4.min.css">
</head>
<body ng-app="app">
<script>
var datePicker = angular.module('app', []);
datePicker.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datePicker({
dateFormat: 'DD, d MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});
</script>
<p><input …