Вызываемый директивный метод при указании директивы

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

Полотно затем dislpays на экране, и пользователь может рисовать на ней. Проблема заключается в том, что пользователь нажимает на другую кнопку, чтобы удалить холст, а затем нажимает кнопку «Рисовать», чтобы отобразить ее снова, на холсте все еще есть последний рисунок. Я хочу, чтобы он очистился.

У меня есть метод, называемый reset() в директиве, которая очищает его. Как я могу вызвать это, как только пользователь нажмет «Рисовать», и будет показана директива canvas?

Answer 1

Вы можете создать метод «Сброс» внутри «ссылки» директивы. Его можно вызвать, если вы не переопределили директиву $ scope внутри.

Answer 2

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

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

Изменение нг-показать/скрыть в нг-если в нг-шоу/скрыть будут иметь элементы на йот и просто скрытые/показано, но нг-если будет удалить элемент из 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... 
}