Question

我有两个自定义指令，如下所示：app1和app2。仅当我点击app2中的特定按钮时，才会显示app1。我能做到这一点的最佳方式是什么？

这是我的代码：

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

使用共享视图模型（范围）来显示或隐藏app2。

您可以在app2上设置ng-show="someModelVar"属性。在init中，确保someModelVar为null或其他falsey值。

在处理按钮时，在app1中单击，将someModelVar设置为非假值。您可以在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>

从另一个加载一个指令

1 个答案: