javascript - 如何控制 Angular Directive(指令)的初始化？

Question

我有一个用作表单控件的指令。该指令隐藏在模态对话框中，并在用户单击按钮以显示表单时显示。由于此指令连接到某些 Web 服务，我不希望它初始化，除非用户单击按钮并显示表单(以防止不必要的 Web 服务调用)。所以，我正在寻找的是父 Controller 触发指令执行一些初始化代码的好方法。这是一个例子:

App.controller('parentCtrl', ['$scope', function($scope) {
  $scope.onButtonClick = function onButtonClick() {
    // tell directive to init somehow
  };
}]);

App.directive('myDirective', function() {
return {
  restrict: 'E',
  scope: {},
  controller: function($scope, myService) {
    function init() {
      myService.getData().then(function(value) { //do init stuff });
    }
  }
});

假设 parentCtrl 的模板包含一个标签。

Answer 1

在 ng-if 中标记您的元素将阻止指令在需要之前进行初始化。 (scope.loadModal 默认为 false)

<my-directive ng-if='loadModal'></mydirective>

注意:在显示一次指令后设置 scope.loadModal = false 将从您的 DOM 中卸载该指令。将其设置回 true 将重新加载导致另一个 http 请求的指令。