I am interested in developing a custom directive that displays data based on the scope of its parent controller.
Here is the directive's JavaScript code:
(function () {
'use strict';
angular
.module('blabla')
.directive('showActiveTask', showActiveTask);
showActiveTask.$inject = ['$uibModal'];
function showActiveTask($uibModal) {
return {
//replace: true,
restrict: 'E',
scope: {
taskData: '='
},
template: '<button type="submit"' +
' class="btn grey lighten-1 btn-raised white-text btn-sm"' +
' ng-click="open()">' +
' <span class="hidden-xs hidden-sm">View assigned tasks</span>' +
'</button>',
link: linkFunc
};
function linkFunc(scope, element, attrs) {
var vm = this;
vm.showLabel = false;
console.log(scope);
scope.open = function () {
vm.modalInstance = $uibModal.open({
templateUrl: 'blabla.html',
size: 'lg',
controller: scope.taskData,
backdrop: true,
resolve: {
console.log('babla')
}
}
}).result.then(function () {
console.log("wanna switch");
});
console.log(scope)
};
scope.clear = function () {
console.log('close modal');
vm.modalInstance.close();
};
}
}
})();
And here is the controller's JavaScript code:
Whenever I try to use this directive, I encounter the error message: "Argument 'fn' is not a function, got Object". The issue seems to be that I am attempting to pass a scope object as a controller. I found a similar problem and solution at . Can anyone point out what I might be doing wrong?