I want to make a custom directive with the jquery plugin timepicker. I'm not getting the input value in the console, it says undefined.
<table class="table table-bordered">
<thead>
<tr>
<th>Time From</th>
<th>Time To</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" ng-model="row1" size=6/ disabled>
</td>
<td>
<input type="text" ng-model="dup_row1 " size=6 timepicki/>
{{dup_row1}}
</td>
</tr>
</tbody>
</table>
var app = angular.module('myApp', []);
app.directive('timepicki', [
function() {
var link;
link = function(scope, element, attr, ngModel) {
element.timepicki();
};
return {
restrict: 'A',
link: link,
require: 'ngModel'
};
}
])
app.controller('ctrl', function($scope) {
$scope.row1 = "00:00"
$scope.submit=function(){
console.log($scope.dup_row1)
}
});
The code you've posted is not the same as the code in your plunker.
The AngularJS Developer Guide says;
In your example above, you log the value of
$scope.dup_row1
on submit, but your controller never sets that value, and as such it is undefined.The following will print "hello" to the console;