javascript - 从另一个指令加载一个指令

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

使用共享 View 模型(范围)来显示或隐藏 app2。

您可以在 app2 上设置 ng-show="someModelVar" 属性。在您的 init 中，确保 someModelVar 为 null 或另一个 false 值。

在处理 app1 中的按钮单击时，将 someModelVar 设置为非 falsey 值。您可以在 app1 上使用自定义属性，以避免在指令代码中对父作用域变量名称进行硬编码。

您可以定义一个公共(public)父范围来允许这样做:

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