gpt4 book ai didi

angularjs - 如何更好地以 Angular 组织动态加载指令?

转载 作者:行者123 更新时间:2023-12-04 15:33:03 27 4
gpt4 key购买 nike

在我的项目中,我有一个小 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>

我不确定是否有可能,但我正在寻找任何更好的替代方案来替代我现在正在做的事情。任何修改方式的例子都很棒。

最佳答案

您可以使用 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-view,因此您可以轻松路由到正确的指令。

然后你定义你的路线:
 .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

关于angularjs - 如何更好地以 Angular 组织动态加载指令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31813181/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com