ionic-modal 和 img 指令效果不佳

Question

我正在使用 ionic 构建应用程序。我写了一个全局 img 指令，它在加载 img 时显示一个警告框。我面临的问题是所有视图都调用了该指令，但是如果我在离子模态中显示图像，则不会调用该指令。

我的指令代码是：

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

    }
}

})

我在这里添加了一个代码笔，这样你就可以看到发生了什么。它是标准离子模态示例的分支，因此有一些冗余代码。

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

a) 单击主页底部显示 "CLICK ON IMAGE TO SEE DIRECTIVE" 的 link，您将看到在图像加载之前，指令警报显示

b) 单击主页上的 "Sign In"，然后在下一页中单击 "Open Modal" 按钮 - 您将看到图像显示但未调用我的指令

谢谢

Answer 1

我认为这是因为当您单击 "Sign In" 时调用了您的 img 指令，主页选项卡在您单击 "Open Modal" 之前在您的 HomeTabCtrl 中加载了 modal.html。

您可以进行如下更改：

对 home.html 的更改：使用 ng-click="openModal()" 而不是 ng-click="modal.show()"

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'
}); }

ionic-modal 和 img 指令效果不佳

ionic-modal and img directive don't play nice

angularjs

ionic-framework

ionic