javascript - 如何用 Angular.js 动态生成 DOM？

Question

我刚开始使用 Angular.js，我想知道如何按照以下方式做一些事情(伪代码):

<li ng-repeat="item in items">
    <# if(item.dataType == "string") { #>
        <input type="text" />
    <# } else if(...) { #>
        <input type="password" />
    <# } #>
</li>

我知道上面的代码不是棱 Angular 分明的，我知道对于简单的处理我可以使用条件 ng-hide 或 ng-show 或类似的东西。但是对于复杂的行为，如果我必须执行各种数据检查和业务逻辑，我如何使用 Angular.js 动态生成 DOM 元素？

Answer 1

在 Angular 世界中，DOM 操作是使用 angularjs 指令完成的。这是关于指令的 Angular 文档:https://docs.angularjs.org/guide/directive ，您最好通读一下。

下面是一些示例代码，可以实现您的伪代码的想法:

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function ($scope){
  $scope.items = [
    42, "hello, world!", 3.14, "i'm alive!"
    ]
});

myApp.directive('myInputDirective', function () {
  return {
    restrict: 'E',
    replace: true,
    template: '<div></div>',
    link: function (scope, element, attrs) {
      if (typeof scope.current === "string") {
        element.append('<input type="text">');
      } else {
        element.append('<input type="password">');
      }
    }
  }
});

这是 html 的样子:

<div ng-controller="MyController">
  <ul ng-repeat="item in items" ng-init="current = item">
    <my-input-directive></my-input-directive>
  </ul>
</div>

这是一个带有工作示例的 plnkr:http://plnkr.co/edit/iiS4G2Bsfwjsl6ThNrnS?p=preview

指令是如何以 Angular 操作 DOM。首先要注意的是，angular 有一组开箱即用的指令，我们使用上面的一些指令(ng-repeat、ng-init、ng- Controller )。上面我们创建了一个自定义指令，它将分析 MyController Controller 的 items 数组中每个 item 的数据类型，并附加正确的 html 元素。

我想您已经理解了 ng-repeat 指令，所以我将跳过它。不过，我将解释我在使用 ng-init 指令做什么。 ng-init 指令允许您计算当前范围内的表达式。这意味着我们可以编写一个在当前 Controller 范围内计算的表达式，在本例中为 MyController 范围。我正在使用此指令为名为 current 的当前项创建别名。我们可以在指令中使用它来检查数组迭代中的当前项是什么类型。

我们的指令 myInputDirective 正在返回一个具有几个不同属性的对象。我不会在这里解释它们(我会让您阅读文档)，但我会解释什么是 link 函数以及我用它做什么。 link 函数通常是我们修改 DOM 的方式。链接函数接受当前 scope(在本例中为 MyController 的范围)，一个与指令关联的 jqLit​​e 包装的 element， attrs 是一个散列对象，具有规范化属性名称和值的键值对。在我们的例子中，重要的参数是 scope，它包含我们的 current 变量，以及 element，我们将把正确的输入附加到.在我们的 link 函数中，我们从我们的 items 数组中检查 typeof 我们的 current 项目，然后我们将一个元素附加到我们的根元素上基于当前项目的类型。

对于这个特定的问题，我上面所做的是多余的。但是根据你的问题，我认为你正在寻找一个起点，以便除了 angular 提供的内置指令之外，更高级地使用 angular。这些都是 Angular 方面的一些高级主题，所以我希望我所说的有一定道理。查看 plunker 并尝试一下，并阅读 https://docs.angularjs.org/guide 上的一些教程。 .希望这对您有所帮助!