I'm currently developing a hybrid Ionic1 app and I am facing an issue with calling a controller method from within a directive.
In the directive, I can pass variables from the controller (like the variable apps), but I am unable to call the removeCredentials() method inside the card-app directive.
I have tried various methods to resolve this problem, including using the & to bind the controller method within the directive. However, clicking on the X icon in the directive template does not trigger any action.
The current code structure is as follows:
Controller AppsCtrl in apps.js
angular.module('testprofile')
.controller('AppsCtrl', function($scope, $state, $log, $ionicHistory, $filter, $ionicPopup, UserData, CredentialStoreService, ionicMaterialMotion, ionicMaterialInk, Auth, Effects, CredentialStoreService, Globals, Validations) {
// Controller code here
})
Directives in inclusions.js
angular.module('testprofile')
.directive('cardProfile', function() {
// Directive code for cardProfile
})
.directive('cardApp', function() {
// Directive code for cardApp
})
.directive('pinRequired', function(Auth) {
// Directive code for pinRequired
})
;
apps.html
<ion-view view-title="Apps">
<ion-content padding="true" class="has-header bg-stable">
// HTML markup for displaying apps
</ion-content>
</ion-view>
card-app.html
<ion-item
menu-close=""
class="card item-thumbnail-left item-icon-right app-item">
// HTML markup for card-app
</ion-item>
Solution: The click event was not triggered due to missing CSS properties like pointer-events: auto; and cursor: pointer;. Adding these styles resolved the issue.