如何使用 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>

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

Answer 1

在 Angular 世界中，DOM 操作是使用 Angularjs 指令完成的。这是关于指令的角度文档： 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

指令是 DOM 的角度操作方式。首先要注意的是，Angular 有一组开箱即用的指令，我们使用了上面的一些指令（ng-repeat、ng-init、ng-controller）。上面我们创建了一个自定义指令，它将分析控制器数组item中每个数据类型的数据类型，并附加正确的 html 元素。itemsMyController

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

我们的指令myInputDirective返回一个具有一些不同属性的对象。我不会在这里解释它们（我会让你阅读文档），但我会解释这个link函数是什么以及我用它做什么。函数link通常是我们修改 DOM 的方式。link 函数接受当前scope（在本例中为 的范围）、与指令关联的MyControllerjqLit​​e 包装，以及它是具有规范化属性名称和值的键值对的哈希对象。在我们的例子中，重要的参数是，它包含我们的变量，以及，我们将在其上附加正确的输入。在我们的函数中，我们从项目数组中检查项目，然后根据当前项目的类型将一个元素附加到根元素上。elementattrsscopecurrentelementlinktypeofcurrent

对于这个特定的问题，我上面所做的就有点矫枉过正了。但根据你的问题，我认为除了 Angular 提供的内置指令之外，你正在寻找 Angular 更高级用途的起点。这些是角度方面的一些高级主题，所以我希望我所说的有道理。查看 plunker 并尝试一下，然后浏览https://docs.angularjs.org/guide上的一些教程。希望这可以帮助！