I have developed a unique custom directive which is defined as:
<div class="col-md-6">
{{templateMapping[colProp].SheetPointer}}
<select class="form-control"
ng-model="selectedColumn"
ng-change="changeMapping()"
ng-options="Col.SheetPointer for Col in optionList"></select>
</div>
Take note of the ng-change.
The code for my directive implementation is as follows:
angular
.module('app.import')
.directive('mappingEdit', ['$rootScope', function ($rootScope) {
return {
restrict: "E",
templateUrl: "partials/templates/MappingEdit.html",
scope: {
templateMapping: "=", //parent object
colProp: "@", //name of property
optionList: "=",
colFilter: "=filter"
},
link: function (scope) {
scope.selectedColumn = {};
scope.changeMapping = function() {
// The ng-change event triggers here!
scope.templateMapping[scope.colProp] = scope.selectedColumn;
// Call "autoSave" here, remember that the "commitSave" function is in the Controller...
};
}
}
}]);
To use this custom directive, you can do so like this:
<mapping-edit
template-mapping="mapping"
col-prop="MappedColumn"
option-list="columnList"
filter="selectedSheet.SheetName" />
Notice that my directive's HTML code consists of a <select> element and incorporates an ng-change event. I aim to invoke a function from my controller named commitSave, which is structured as follows:
$scope.commitSave = function () {
alert("on changed!")
}
What method would enable me to call this controller function from within my directive using the ng-change event?