Exploring angularjs directives for the first time has been quite a challenge. I can't seem to figure out why my directive isn't working properly as the scope.durationTimeInput always returns undefined no matter what I try.
(function () {
'use strict';
angular.module('BlurAdmin.theme')
.directive('durationInput', durationInput);
/** @ngInject */
function durationInput($window) {
var tpl = '<div class="duration_time_input"> \
<input ng-model="duration_time.hours" type="number" class="hours" placeholder="00" min="0" max="3" step="1" style="width: 45px"> \
<span class="duration-time-sep">:</span> \
<input ng-model="duration_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="59" step="1" style="width: 45px"> \
</div>';
return {
restrict: 'A',
template: tpl,
replace: true,
scope: {
durationTimeInput: '='
},
link: function (scope, element, attrs) {
console.log(scope);
console.log(scope.durationTimeInput);
scope.$watch('durationTimeInput', function (newValue) {
var duration = moment.duration(newValue, 'minutes');
scope.duration_time = {
hours: duration.hours(),
minutes: duration.minutes(),
}
});
scope.$watchCollection('duration_time', function (newTime, oldTime) {
if(scope.duration_time.hours==0&&scope.duration_time.minutes==0){
scope.duration_time.minutes=1;
}
scope.lapTimeInput = moment.duration(newTime, 'minutes').asMinutes();
});
}
};
}
})();
I use this directive with a div tag:
<div duration-input="myIndex.duration" id="scheduleDuration"></div>
The value of myIndex.duration is dynamic and based on user interaction.