Angularjs 让ng类为动态创建的元素工作

我正在制作一个动态创建一组标签的应用程序。每个都需要一个ng类参数，但Angular看不到新创建的元素，因此被忽略。

var myEl=angular.element（document.querySelector（'#box'）；
var div=angular.element（'这是更多的文本'）；
髓鞘附加（div）；

如何让它识别新创建的元素？

请参阅。您可以使用与此类似的服务：

var myModule=angular.module（'myModule'，[]）；
控制器（'myController'，函数（$scope，$compile）{
$scope.areaStatus=false；
$scope.insertDiv=function（）{
var myEl=angular.element（document.querySelector（'#box'）；
var div=angular.element（'这是更多的文本'）；
髓鞘附加（div）；
$compile（div）（$scope）；
}

请参阅。您可以使用与此类似的服务：

var myModule=angular.module（'myModule'，[]）；
控制器（'myController'，函数（$scope，$compile）{
$scope.areaStatus=false；
$scope.insertDiv=function（）{
var myEl=angular.element（document.querySelector（'#box'）；
var div=angular.element（'这是更多的文本'）；
髓鞘附加（div）；
$compile（div）（$scope）；
}

这是我将如何执行您介绍的任务；它以不同的方式利用了一些角度特征。我知道它不像您的问题那样使用

角度元素，但通常更灵活。以下是相关代码：

myModule.controller('myController', function ($scope) {

    $scope.areaStatus = false;

    $scope.dynamicData = [];

$scope.insertDiv=function(message) {
    if (message)
    {
        $scope.dynamicData.push({value : message})
    }
    else{
    $scope.dynamicData.push({value: "This is more text"});
    }
}

以及HTML：

<div ng-controller="myController" id="box">
        <button ng-click="areaStatus = !areaStatus">Toggle</button>
        <div ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
            This is some text
        </div>

<button ng-click="insertDiv()">insert</button>
<button ng-click="insertDiv('This is a different Message')">insert different message</button>

<div ng-repeat="data in dynamicData" ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
    {{data.value}}
</div>


切换
这是一些文本
插入
插入不同的消息
{{data.value}}

这就是我将如何执行您介绍的任务；它以不同的方式利用了一些角度特征。我知道它不像您的问题那样使用
角度元素，但通常更灵活。以下是相关代码：

myModule.controller('myController', function ($scope) {

    $scope.areaStatus = false;

    $scope.dynamicData = [];

$scope.insertDiv=function(message) {
    if (message)
    {
        $scope.dynamicData.push({value : message})
    }
    else{
    $scope.dynamicData.push({value: "This is more text"});
    }
}

以及HTML：

<div ng-controller="myController" id="box">
        <button ng-click="areaStatus = !areaStatus">Toggle</button>
        <div ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
            This is some text
        </div>

<button ng-click="insertDiv()">insert</button>
<button ng-click="insertDiv('This is a different Message')">insert different message</button>

<div ng-repeat="data in dynamicData" ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
    {{data.value}}
</div>


切换
这是一些文本
插入
插入不同的消息
{{data.value}}

您应该尽可能避免使用
angular.element
，就像使用jquery一样。当您别无选择，只能使用
angular.element
时，最好在可以重新编译作用域的指令中使用它。然而，使用
ng repeat
可以轻松完成您要做的事情。我每天都在这里的一篇帖子中说，针对数据编写代码总是比针对DOM编写代码要好。我将用ng重复来重写你的小提琴，作为一个练习，展示如何避免对元素进行操作。你应该尽可能避免使用
angular.element
，这几乎就像使用jquery一样别无选择，只能使用
angular.element
，最好在可以重新编译作用域的指令中使用它。但是，使用
ng repeat
可以轻松完成您要做的事情。我每天都在这里的一篇文章中说，针对数据编写代码总是比针对DOM编写代码更好。我将重写您的摆弄一个ng repeat，就像一个练习，展示如何避免对元素进行操作。你不应该在控制器中写入任何HTML。糟糕的代码我喜欢这个答案，因为它提供了我想要的功能（$compile）。在我尝试摆脱jquery方式时，我可能在其他地方需要这个代码片段：）@Shohel我同意。我相信有更好的方法可以做到这一点，但我没有足够的信息来确切知道他想要完成什么。你不应该在控制器中写入任何HTML。糟糕的代码我喜欢这个答案，因为它提供了我想要的功能（$compile）。当我试图摆脱jquery方式时，我可能在其他地方需要这个片段：）@Shohel我同意。我确信有更好的方法可以做到这一点，但我没有足够的信息来确切地知道他想要完成什么。我喜欢它。@Claies，我该如何在ng重复中指定一个绝对位置。每个标签都有不同的位置。我目前使用jQuery执行此操作，并使用内联p追加元素参数。最简单的方法是每个标签有一个变量，而不是ng repeat，或者甚至用一个新属性扩展对象。你甚至可以编写一个指令，引用每个位置数组中的特定元素。这里的最终目标是在数据中对应用程序建模，然后呈现数据，而不是试图对DOMI进行建模知道你所说的每个标签的变量是什么意思。我可以在div标签中设置动态参数，比如“top:{label.top}”吗？当然，只需将label设置为对象，而不是数组，并添加为每个部分命名的属性（即label.top、label.right、label.home等）很抱歉格式化，从Phone发帖我喜欢。@Claies，我如何在ng repeat中指定一个绝对位置。每个标签都有一个不同的位置。我目前使用jQuery执行此操作，并使用内联参数附加元素。最简单的方法是每个标签都有一个变量，而不是ng repeat，甚至扩展object标签有一个新属性。你甚至可以编写一个指令，引用每个位置数组中的特定元素。这里的最终目标是在数据中对应用程序建模，然后呈现数据，而不是试图对DOMI建模。我不知道你所说的每个标签的变量是什么意思。我可以在div标记中设置动态参数，如“top:{{label.top}“当然，只需将label设置为一个对象而不是数组，并为每个部分添加命名的属性（即label.top、label.right、label.home等）。抱歉格式化，从电话发帖