CODEWITHSUNDEEP
angularjsionic-framework
user1361529
user1361529

Reputation: 2697

ionic-modal and img directive don't play nice

I am using ionic to build an app. I've written a global img directive that displays an alert box whenever an img is loaded. The problem I am facing is this directive is called for all views, but if I display an image inside an ionic-modal, the directive is not called.

My directive code is:

.directive('img', function () {
return {
    restrict: 'E',
    link: function (scope, element, attrs) {
        console.log ("********** IMG DIRECTIVE ");

    }
}

})

I've added a codepen here so you can see what is going on. It's a fork from a standard ionic modal example, so has some redundant code.

http://codepen.io/asker/pen/YXXyZj?editors=101

a) Click on the link at the bottom of the home page that says "CLICK ON IMAGE TO SEE DIRECTIVE" and you will see just before the image loads, the directive alert displays

b) Click on "Sign In" on home page and in the next page, click "Open Modal" button - and you will see the image show up but my directive not called

Thanks

Upvotes: 0

Views: 739

Answers (1)

snowery
snowery

Reputation: 468

I think it is because your img directive is called when you click "Sign In", the home tab loaded the modal.html in your HomeTabCtrl before you click "Open Modal".

You can make changes like following:

Changes to home.html: use ng-click="openModal()" instead of ng-click="modal.show()"

Changes to HomeTabCtrl:

$scope.openModal = function(){
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
    $ionicModal.show();
}, {
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
}); }

Upvotes: 1

Related Questions