在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

Here's a quick demo: 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屋！