0

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

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

即 $(el).append("").mycontrol({opts:1});

我还没有真正开始使用角度模板和重复，但认为这可能是要走的路，但是如何“引导”动态添加的新控件。

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

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

欢迎任何信息

4

2 回答 2

1

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

看：

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

于 2014-07-30T22:45:57.863 回答
0

哪些条件可以使控制被包含或排除？如果控制器中有许多布尔变量用作标志，则可以使用 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：创建并显示真实值的元素
  • ngHide：在真实值上创建和隐藏元素
  • ngIf：在真值上创建元素，在假值上销毁它
  • ngDisabled：创建元素，然后为其添加 disabled 属性

这是一个非常基本的概述，不一定是你应该做的事情，只是一个例子来说明如何做。位于此处的 AngularJS 文档非常棒。Angular 是一个很棒的工具！

于 2014-07-30T22:50:07.563 回答