显示指令时调用指令方法

Called directive method when directive is shown

本文关键字：指令 方法 调用 显示      更新时间：2023-09-26

我有一个指令，它在屏幕上显示一个画布，然后你可以在上面绘制。我的控制器中有代码来显示/隐藏画布。

<canvas class="gate-canvas" id="canvas" ng-show="showGateCanvas" gate></canvas>
<button ng-click="showCanvas()">Draw</button>

在我的控制器中：

$scope.showCanvas = function() {
    //doing some other stuff
    $scope.showGateCanvas = true;
}

然后画布在屏幕上消失，用户可以在上面画画。问题是，当用户单击另一个按钮删除画布，然后单击"绘制"按钮再次显示时，画布仍然有他们的最后一幅画。我希望它被清除。

我在指令中有一个名为reset()的方法来清除它。如何在用户单击"Draw"并显示画布指令时立即调用它？

您可以在指令的"链接"中创建"Reset"方法。如果您没有在指令中重写$scope，则可以调用它。

<canvas class="gate-canvas" id="canvas" ng-if="showGateCanvas" gate></canvas>
<button ng-click="showCanvas()">Draw</button>

将ng显示/隐藏更改为ng if asng-show/hide将在dom上具有元素，并且只是隐藏/显示，但是ng-if将从dom中删除该元素，当您再次显示它时，指令将再次启动。

此外，keeping重置指令范围中的方法，并且无论何时显示指令，都可以调用该函数。

使用ng-if而不是ng-show，

但如果您不这样做，请更新您的directive:

link:function(scope,element,attrs){
    scope.$watch(function() { return element.is(':visible') },function(){
        //call your reset here
    });
    //other things...
}
相关文章：