2016-05-12 14 views
0

私は描画可能なキャンバスを画面上に表示するディレクティブを持っています。キャンバスを表示/非表示するコードがコントローラにあります。ディレクティブが表示されているときにディレクティブメソッドが呼び出される

<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()というメソッドを持っています。ユーザーが「ドロー」をクリックしてキャンバス・ディレクティブが表示されると、すぐにこれを呼び出すことができますか?

+0

あなたのコントローラで**リセット()**メソッドを作成します。 **キャンバスを削除する**別のボタンのイベントリスナーで**。リセット機能を呼び出すことができます。 –

答えて

0

ディレクティブの "link"の内部に "Reset"メソッドを作成できます。 $ scope insideディレクティブをオーバーライドしていない場合に呼び出すことができます。 NG-場合する NG-の表示/非表示として

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

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

変更NG-表示/非表示は、DOMの要素を持っているだけの表示/非表示、 が、NG-場合は、DOMから要素を削除し、表示されたときになりますもう一度、指令が再度開始されます。

keepingディレクティブスコープのリセット方法で、ディレクティブが表示されているときはいつでも、その機能を呼び出すことができます。

0

むしろng-showより使用ng-if

しかし、そうでない場合は、あなたのdirectiveは更新:

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

    //other things... 
} 
関連する問題