My goal is to utilize the $watchCollection feature in my directive to monitor two specific elements.
The first element is the
ng-model.The second element is the
idattribute.
I have successfully implemented separate watches for each of them.
return {
restrict: 'A',
require: 'ngModel',
scope: {
options: '=',
model: '=ngModel'
},
link: function ($scope, $el, $attrs) {
scope = $scope;
$scope.$watch(
function () {
return $el[0].id;
},
function (elementId) {
$('#' + elementId).on('switch-change', function () {
scope.model[this.id] = $(this).find('input').is(':checked');
$scope.$apply();
});
$('#' + elementId)['bootstrapSwitch']();
$('#' + elementId).bootstrapSwitch('setOnLabel', _($('#' + elementId).attr('data-on-label')));
$('#' + elementId).bootstrapSwitch('setOffLabel', _($('#' + elementId).attr('data-off-label')));
}
);
$scope.$watchCollection('model', function(newval){
if(typeof newval !== 'undefined' && !$.isEmptyObject(newval)){
// perform required actions here
}
});
}
}
However, I am looking for a way to consolidate all variables within the same function. Can anyone provide assistance with this? Thank you.