Question

我在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标准指令，我不想为这项工作创建自定义指令（除非需要）。

Answer 1

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

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

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

如果在指令中使用$ compile service添加元素，angular将识别动态添加的元素。

Answer 2

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

我在http://sqlite.org/download.html

找到了一个非常好的例子

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);
        });
    };
});

Answer 3

在角度思维中你应该从JS代码中操纵dom。并使用ng- *指令所以我不知道你的代码，但我认为你只需要做一些事情：

查看

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

<强>控制器

Traceback (most recent call last): File "qcdlcomm.py", line 23, in <module> if not call('whoami')[0] == 'root': File "qcdlcomm.py", line 20, in call return subprocess.Popen(cmd,shell=True,stdout=subprocess.PIPE).stdout.read().strip().split("\n") TypeError: 'str' does not support the buffer interface

Answer 4

在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

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

4 个答案: