當指令顯示時調用指令方法

我有一個指令，它在屏幕上顯示一個畫布，然後你可以在畫布上畫畫。我有我的控制器中的代碼來顯示/隱藏畫布。當指令顯示時調用指令方法

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

畫布然後dislpays在屏幕上，用戶可以在上面畫畫。問題是當用戶點擊另一個按鈕來移除畫布，然後點擊'繪製'按鈕再次顯示它時，畫布仍然有最後一個繪圖。我想清除它。

我在清除它的指令中有一個名爲reset()的方法。一旦用戶點擊「繪圖」並顯示畫布指令，我怎樣才能調用此方法？

來源

2016-05-12 Mark

創建**復位（）**方法在你的控制器。在另一個按鈕的事件監聽器中刪除畫布**。您可以調用重置功能。 –

您可以在指令的「鏈接」中創建「重置」方法。如果你沒有在指令中覆蓋$ scope，它可以被調用。

來源

2016-05-12 08:46:31

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

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

變化NG-顯示/隱藏到NG-如果作爲 NG-顯示/隱藏將對DOM和元素只是被隱藏/顯示，但NG-如果從DOM刪除元素，當你表現出它再次，指令將再次啓動。

另外keeping重置方法在指令範圍內，每當指令被顯示時，您都可以調用該函數。

來源

2016-05-12 08:47:15 Shreedhar

使用ng-if而非ng-show，

但是，如果你不這樣做，更新您的directive：

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

    //other things... 
}

來源

2016-05-12 08:54:07

當指令顯示時調用指令方法

回答

相關問題