在 Angular 中添加带有指令的元素答案

【问题标题】：Adding an element with directives in Angular在 Angular 中添加带有指令的元素
【发布时间】：2015-08-05 19:53:39
【问题描述】：

我在 Angular 中动态添加一个元素。代码如下。

myelement.after('<input ng-model="phone" id="phone">');

元素被添加并且一切正常。但是我认为我错过了一步，Angular 无法识别新元素，因为当我稍后收集数据时，动态添加的元素的值没有定义。

动态添加元素的原因是输入的数量从一开始就未知，用户可以根据需要添加任意数量的元素。实际代码如下：

myelement.after('<input ng-model="phone"' + counter + ' id="phone' + counter + '">');

对不起，我应该从一开始就提供完整的样本。请看下面的 jsfiddle，添加一些电话（带值）并列出它们：http://jsfiddle.net/kn47mLn6/4/

请注意，我没有创建任何新指令。我只使用 Angular 标准指令，并且我不想为此工作创建自定义指令（除非需要）。

【问题讨论】：

标签： javascript angularjs dom angularjs-directive

【解决方案1】：

在有角度的头脑中，您应该从 JS 代码中操作 dom。并使用 ng-* 指令所以我不知道你的代码，但我认为你只需要做类似的事情：

查看

<button ng-click="showAction()">Show the phone input</button>
<input ng-show="showPhone" ng-model="phone" id="phone">

控制器

app.controller('ctrl', [function(){
  $scope.showPhone = false;

  $scope.showAction = function() {
    $scope.showPhone = true;
  };
}]);

【讨论】：

【解决方案2】：

在 Angular 之外，您需要使用事件处理程序来识别动态添加的新元素。我没有看到足够的代码来测试，但这里有一篇文章用 $.on() 讨论了这个问题： Jquery event handler not working on dynamic content

这是一篇很好的文章，可以帮助您处理指令，并可以通过创建您自己的指令来解决您的问题： http://ruoyusun.com/2013/05/25/things-i-wish-i-were-told-about-angular-js.html#when-you-manipulate-dom-in-controller-write-directives

【讨论】：

【解决方案3】：

假设您正在使用指令向 DOM 添加元素。您可以使用内置的角度服务 $compile。首先将 $compile 服务注入到您的指令中。然后在指令的链接函数中，获取要附加元素的 myElement 。然后使用 angular.element() 创建你的元素。然后使用 $compile 服务编译它并传递你现在所在的范围。（这里这个范围是指令范围）。获取编译后的 dom 元素后，您可以将其附加到 myElement 之后。

这是一个关于如何从指令动态添加元素的示例：

var elementToBeAdded = angular.element('<input ng-model="phone" id="phone">');
elementToBeAddedCompiled = $compile(elementToBeAdded)(scope);
myElement.append(elementToBeAddedCompiled);

如果您在指令中使用 $compile 服务添加元素，Angular 将识别您动态添加的元素。

【讨论】：

【解决方案4】：

我试图在不使用指令的情况下完成此操作，但似乎在 Angular 中向 DOM 添加多个元素的最佳方式（也可能是唯一正确的方式）是定义自定义指令。

我在这里找到了一个很好的例子http://jsfiddle.net/ftfish/KyEr3/

HTML

<section ng-app="myApp" ng-controller="MainCtrl">
    <addphone></addphone>
    <div id="space-for-phones"></section>
</section>

JavaScript

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

function MainCtrl($scope) {
    $scope.count = 0;
}

//Directive that returns an element which adds buttons on click which show an alert on click
myApp.directive("addbuttonsbutton", function(){
    return {
        restrict: "E",
        template: "<button addbuttons>Click to add buttons</button>"
    }
});

//Directive for adding buttons on click that show an alert on click
myApp.directive("addbuttons", function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){
            scope.count++;
            angular.element(document.getElementById('space-for-buttons')).append($compile("<div><button class='btn btn-default' data-alert="+scope.count+">Show alert #"+scope.count+"</button></div>")(scope));
        });
    };
});

//Directive for showing an alert on click
myApp.directive("alert", function(){
    return function(scope, element, attrs){
        element.bind("click", function(){
            console.log(attrs);
            alert("This is alert #"+attrs.alert);
        });
    };
});

【讨论】：