Angular.js：根据状态配置从模板动态添加或删除指令

Question

我使用ui-router创建了一个angularjs应用。该应用程序的主要目的是在家谱中搜索符合特定条件的人。我希望有不同的预配置方案，例如搜索数据问题。每个场景都有一组共享选项，可以限制搜索范围（我们应该与起始人的距离）。这些方案还具有仅与该方案相关或与所有方案的子集相关的选项。选项通常采用表格元素的形式，如选择，复选框和单选按钮。在搜索数据问题的情况下，我们会显示我们要查找的所有问题的列表，其中包含用于打开或关闭问题的复选框。每个选项（或选项组）都有一个关联的指令和控制器。

我正在尝试设置它，以便所有方案共享相同的模板但不同的路由。这需要动态启用/禁用其相关指令和控制器的正确选项。

我有一个基本的（共享模板，但不是可配置的选项）使用抽象状态。

app.config(function($stateProvider){

  $stateProvider
    .state('search', {
      abstract: true,
      url: '/search',
      templateUrl: 'searchPage.html'
    })
    .state('search.scenario1', {
      url: 'scenario1',
      controller: 'searchController'
    })
    .state('search.scenario2', {
      url: 'scenario2',
      controller: 'searchController'
    })

})

我不确定的是动态打开和关闭给定方案显示的选项的最佳方法。我可以想到两种可能性，但我不确定哪种是最好的，也不确定是否有更好的方法。我更喜欢一个允许我通过设置新状态来添加新场景的选项。所以它可能看起来像这样：

.state('search.scenario2', {
  url: 'scenario2',
  controller: 'searchController',
  data: {
    option1: true,
    optionGroup2: true
  }
})

我不能只使用ng-show和ng-hide因为控制器仍然会被实例化，并且即使没有显示，也会使用默认功能影响搜索。

1。让每个控制器查找禁用的属性，如果属性存在则不执行任何操作。

这似乎是最简单的（不那么神奇），但我宁愿不让控制器首先被实例化。这只是感觉不对。我也不喜欢在所有控制器中重复相同逻辑的想法。也许你知道一个干净的方法来做到这一点。

2。使用父指令的compile函数删除或插入正确的指令

我喜欢这个，因为我可以保证控制器不会被不必要地实例化，但这种方法并不是很简单。我不相信我能正确地把它拉下来。

Answer 1

在写这个问题时，我想到了实现这一目标的第三种方法。虽然它没有像我想要的那样使用状态数据，但它很容易。

它使用nested views。在父抽象模板中，定义子场景将使用嵌套模板填充的视图。在这些模板中，我包含相关选项的指令。因此，儿童状态看起来像这样：

.state('search.scenario2', {
  url: 'scenario2',
  controller: 'searchController',
  templateUrl: 'scenario2.html'
})

同样，这不使用状态数据，它需要为每个场景创建模板文件，但这很容易。