Question

在我的项目中，我有一个小div，有3种选择“食物”，“饮料”，“社交”。这些绑定到“AppController”上的范围变量“$ scope.option”。

我有一系列ng-switch语句：

<div ng-switch on="option">
<div ng-switch-when="food">
<fooddirective></fooddirective>
</div>
<div ng-switch-when="drinks">
<drinksdirective></drinksdirective>
</div>
<div ng-switch-when="social">
<socialdirective></socialdirective>
</div>
</div>

请注意，无论选择什么选项，食物，饮料或社交，这些只占网页的一半，因此它们都被“AppController”所包围。我的意图是能够“动态加载指令”到页面中。有没有办法我可以摆脱明确写"<socialdirective></socialdirective>"或甚至摆脱所有ng-switch的需要？还是有更好的选择？如果我说20或30个这些选项（即食物，饮料，社交，游戏），感觉会变得非常混乱。

如果我事先知道指令的名称，说“食物”，“饮料”，“社交”。有什么方法可以做我喜欢的事情：

<div ng-switch on="option">
   // code that interprets option's variable (i.e. food), appends the text "directive" after, and dynamically/lazily add it in and remove it so it behaves like an ng-switch
</div>

我不确定是否有可能，但我正在寻找更好的替代方案。任何修改后的做法的例子都很棒。

Answer 1

您可以使用UI路由器来完成此任务：

- index.html的

<body>
  Top Level
  <div ui-view></div>
</body>

- optionsPage.html

<select ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
<div ui-view></div>

在选项页面中，您将使选择选项生成ui-sref链接到您要显示的每种类型的指令。子状态只会更改其父状态的ui视图，因此您可以轻松地路由到正确的指令。

然后你定义你的路线：

 .state('options.food', {
      templateUrl: "partials/options.food.html"
    })
    .state('options.drinks', {
      templateUrl: "partials/options.drinks.html"          
    })

然后，您可以在每个HTML文件中定义指令。

（这些代码大部分来自Angular和UI-Router代码示例，但希望您能看到您需要做什么。）

UI路由器 - https://github.com/angular-ui/ui-router

Answer 2

如果这些指令有很多共同的功能，对我来说似乎最好的选择是实现一个新的指令，比如 optiondirective ，它封装了这种行为。这样你就可以在html上插入那个带有所选选项作为属性的指令，ng-switch或你最终使用的任何解析机制都将隐藏在该指令的模板中，并且通用功能将在指令的控制器。这并没有帮助你摆脱可怕的部分，但至少你将重新使用更多的实现并模块化你的代码。

Answer 3

警告：我没有给你一个完全正常的答案..只是想让你知道如何去做。

你可以创建另一个包装原始指令的指令

.directive("wrapper", function(){
return {
  scope: {'option': @},
  template: '<' + option + 'directive>' + '</' + option + 'directive>'
}
})

然后将其称为

如果这不起作用，你需要在你喜欢的函数中编译html，如下面的

      var tmpl = '<' + option + 'directive>' + '</' + option + 'directive>'
       element.html(tmpl );
       $compile(element.contents())(scope);

应该肯定这样做

如何更好地组织角度动态加载指令？

3 个答案: