Question

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

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

然后画布在屏幕上显示，用户可以在画面上画画。问题是，当用户单击另一个按钮以删除画布时，然后单击“绘制”＆＃39;按钮再次显示它，画布仍然有他们的最后一个绘图。我希望它清除。

我在指令中有一个名为reset()的方法可以清除它。如果用户点击“抽奖”，我该怎么称呼它？并显示canvas指令？

Answer 1

您可以创建＆＃34;重置＆＃34;内部方法＆＃34;链接＆＃34;指令。如果你没有覆盖指令内的$ scope，可以调用它。

Answer 2

<canvas class="gate-canvas" id="canvas" ng-if="showGateCanvas" gate></canvas>

<button ng-click="showCanvas()">Draw</button>

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

同样keeping在指令范围内重置方法，并且只要显示指令，就可以调用该函数。

Answer 3

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

但如果不这样做，请更新directive：

link:function(scope,element,attrs){
    scope.$watch(function() { return element.is(':visible') },function(){
        //call your reset here
    });

    //other things...
}

显示指令时调用指令方法

3 个答案: