Question

我对角度很新，并且已经使用requirejs和angular设置了一个项目，但用UI做了相当简单的事情。

我的问题是使用angular，你如何创建一个可以在运行时重用和添加的组件/控件。例如，在jquery中，我可能会在调用元素上的插件之前创建一个插件并动态添加dom元素。

即。 $（EL）.append（＆＃34;＆＃34;）mycontrol（{OPTS：1}）;

我并没有真正开始使用角度模板和重复，但认为这可能是要走的路，但是如何使用＆＃34; bootstrap＆＃34;动态添加新控件。

我想到的例子是我使用ui-select2（AngularUI），我想在一些动态添加到dom的面板中包含select2组件。

另一种解决方案当然是从添加了主机dom元素的ng控制器调用select2函数。

欢迎任何信息

Answer 1

在角度应用中，添加的DOM元素不会自动解析。为此，您必须使用$compile。

请参阅：

https://stackoverflow.com/a/18157958/3893465和https://docs.angularjs.org/api/ng/service/ $ compile

Answer 2

将控制措施纳入或排除的条件是什么？如果控制器中有许多用作标志的布尔变量，则可以使用ngShow / ngHide或ngIf指令来显示或隐藏它们。像下面这样......

<form>
    <input type="text" ng-model="input.name" ng-show="input_enabled.name">
    <input type="text" ng-model="input.age" ng-hide="input_enabled.age">
    <input type="email" ng-model="input.email" ng-if="input_enabled.email">
    <input type="text" ng-model="input.phone" ng-disabled="input_enabled.phone">
</form>

然后在你的控制器......

$scope.input = {
    name: '',
    age: '',
    email: '',
    phone: ''
};

$scope.input_enabled = {
    name: true, /* this will show input.name */
    age: false, /* this will show input.age */
    email: false, /* this will hide imput.email */
    phone: true /* this will disable, but not hide, input.phone */
};

ngShow：在truthy值上创建并显示元素
ngHide：在truthy值上创建和隐藏元素
ngIf：在truthy值上创建元素，在falsy上销毁它
ngDisabled：创建元素，然后将disabled属性添加到其中

这是一个非常基本的概述，并不一定是你应该做的事情，只是一个如何完成它们的例子。 AngularJS文档located here非常出色。 Angular是一个很棒的工具！

Angular - 如何构建动态添加的控件？

2 个答案: