angularjs - 在 AngularJS 中将指令插入 HTML 中?

标签 angularjs angularjs-directive

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

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

mainView 中的指令可以有一个独立的作用域,因为这些特性执行彼此独立的操作(它们共享的数据被封装在 angular 服务中)。

Here is an image

插入指令的 Angular 方式是什么?

我总是读到 DOM 操作应该只发生在指令中,但在文档和其他问题中,我没有找到这样做的方法。

最佳答案

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

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

如果您确实在三个列表之间确实有很多通用功能,则可以执行以下操作:

<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 .

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

关于angularjs - 在 AngularJS 中将指令插入 HTML 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15503766/

相关文章:

javascript - Firebase/AngularJS Bootstrap 应用程序无法适应移动屏幕

css - 带有 css 的 Angular HTML 预览

javascript - 从独立指令访问 $scope

javascript - cordova 插件的元数据值未更新

javascript - 如何使用AngularJS实现这种悬停效果?

javascript - Angularjs ng 重复 - 按 $index 删除

javascript - Angular 条件模板URL

javascript - Angular 模块不可用 Karma Jasmine

javascript - 从 Controller 函数调用 ng-repeat

angularjs - 我如何使用 AngularJs 显示枚举值