從另一個指令加載一個指令

Question

我有兩個自定義指令，如下所示：app1和app2。只有當我點擊app1中的特定按鈕時，纔會顯示app2。我能做到這一點的最佳方式是什麼？

這裏是我的代碼：

module.directive('app1', function() { 
    // Runs during compile 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs,controller) { 
      var filter = scope.getFilters(attrs.appname); 
     }, 
     templateUrl: '../directives/filter/partials/filter.html' , 
     controller: "filterCtrl" 
    }; 
}); 

module.module('app2').directive('dmView', function() { 
    return { 
     restrict: 'E', 
     controller: 'viewController', 
     link: function(scope, element, attrs) {  
      var viewData = scope.getViewData(attrs.appname); 
      var options = { 
       forceFitColumns: false, 
       enableColumnReorder: false 
      } 
      var grid; 
      grid = new Slick.Grid('#myGrid', viewData.data, viewData.columns, options); 
      scope.grid = grid; 
     }, 
     templateUrl: '../directives/view/partials/view.html' 
    }; 
}); 

Answer 1

使用共享視圖模型（範圍），以顯示或隱藏APP 2。

您可以在app2上設置ng-show="someModelVar"屬性。在init中，確保someModelVar爲null或另一個falsey值。

在處理app1中的按鈕單擊時，將someModelVar設置爲非falsey值。您可以在app1上使用自定義屬性，以避免在指令代碼中對父範圍變量名稱進行硬編碼。

可以定義一個共同的父範圍，允許這樣的：

<div ng-controller='parentScope'> 
    <!-- define someModelVar in parent scope --> 
    <div ng-controller='app1Controller'> 
    <app1 my-app2-flag-var='someModelVar'>...</app1> 
    ... 
    </div> 
    <div ng-controller='app2Controller' ng-show='someModelVar'> 
    ... 
    </div> 
</div>