在 AngularJS 中将指令插入 HTML 中? [英] Inserting directives into HTML in AngularJS?

问题描述

我对 AngularJS 还很陌生，并试图以 Angular 的方式思考.
现在我正在开发具有不同功能的应用程序，这些功能在名为 FeatureRegistry 的角度服务中注册.从那里，它们被插入到 FeatureSelectionController 的侧边栏中.通过点击一个特性，应该调用相应特性的 startFeature() 函数，然后该特性应该被添加到主视图中(但是这个 DOM 操作应该在哪里发生?).

I'm fairly new to AngularJS and trying to think the Angular way.
Right now I'm working on an app that has different features that register in an angular service called FeatureRegistry. From there they are taken and inserted into a sidebar from an FeatureSelectionController. By clicking on a feature the startFeature() function of the appropriate feature should be invoked, and after that the feature should be added to the main view (but where should this DOM manipulation occur?).

所以这是我的问题.向 DOM 添加指令的最佳方式(角度方式)是什么，我不一定要使用 jQuery 来执行此操作(并且还想限制 $compile、$watch 等的使用).

So there is my question. What is the best way (the angular way) of adding directives to the DOM, I don't necessarily want to use jQuery to do this (and also want to limit the uses of $compile, $watch etc).

mainView 中的指令可以有一个独立的作用域，因为功能执行的动作彼此独立(它们共享的数据被封装在 angular 服务中).

The directives in the mainView can have an isolated scope, because the features perform actions that are independent from each other (the data they share are encapsulated in angular services).

插入指令的角度方式是什么?

What would be the angular way to insert the directives?

我总是读到 DOM 操作应该只发生在指令中，但在文档和其他问题中我没有找到方法.

I always read that DOM manipulations should only happen in directives, but in the documentations and also in other questions I didn't find THE way to do it.

推荐答案

这是一个快速演示:http://plnkr.co/edit/eZTtRVTPb7k9kgS8woKh?p=preview

我不一定认为这里需要指令......除非列表中的特性、最大化特性和最小化特性之间有很多共同的功能.

I don't necessarily see the need for directives here ... unless there is a lot of common functionality between feature in the list, the maximized feature, and the minimized feature.

如果您确实在这三个列表之间确实有很多共同的功能，您可以这样做:

If you really do have lots of common functionality between the three lists, you could do something like this:

<feature ng-repeat="f in registry.all()" model="f" state="list">
<feature ng-repeat="f in registry.maximized()" model="f" state="open">
<feature ng-repeat="f in registry.minimized()" model="f" state="minimized">

然后在您的指令模板中，您可以拥有通用功能，然后使用 ng-switch 或 ng-show 根据状态确定要使用的功能.

Then in your directive template, you could have your common functionality then determine what to have depending on the state using ng-switch or ng-show.

您需要帮助编写实际指令吗?

Do you need help writing the actual directive?

这篇关于在 AngularJS 中将指令插入 HTML 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！