Angularjs ng模型不'；创建新的DOM元素时无法工作

当我创建一个新的DOM元素（超出angular）时，angular无法控制它。为什么?

例如：

CreateDomElementWithDataBinding
angular.module（'gemStore'，[]）.controller（'StoreController'，function（）{
this.name='diamont'；
这个。明亮=3；
});
var changeDom=函数（）{
document.getElementById（'placeNewElement'）。innerHTML=“”；
};

使用管理DOM树的惯用方法（即，不要从下面修改它）

CreateDomElementWithDataBinding
angular.module（'gemStore'，[]）.controller（'StoreController'，function（）{
this.name='diamont'；
这个。明亮=3；
this.showNameField=false；
});

您处理新元素的方法是错误的。可以使用角度指令并与该指令共享同一角度控制器的范围来实现这一点。这将在运行时更新DOM。 请看看这个。在本文中，我添加了一个文本框，并动态添加了一个新的文本框，该文本框与第一个文本框共享相同的范围，并且属于angular的范围

<section ng-app="myApp" ng-controller="MainCtrl">
    <addbuttonsbutton></addbuttonsbutton>
    <input type='text' ng-model='store'/>
    <div id="space-for-buttons"></section>
</section>

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

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

//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{
        link: function(scope, element, attrs){
        element.bind("click", function(){
            angular.element(document.getElementById('space-for-buttons')).append($compile("<input type='text' ng-model='store' ng-init='scope.store'/>")(scope));
        });
        }
    };
});

var myApp=angular.module（'myApp'，[]）；
函数MainCtrl（$scope）{
$scope.count=0；
$scope.store=“”；
}
//返回一个元素的指令，该元素在单击时添加按钮，该按钮在单击时显示警报
指令（“addbuttonsbutton”，function（））{
返回{
限制：“E”，
模板：“单击以添加按钮”
}
});
//用于添加单击时显示警报的按钮的指令
指令（“addbuttons”，函数（$compile）{
返回{
链接：函数（范围、元素、属性）{
元素绑定（“单击”，函数（）{
元素（document.getElementById（'space-for-buttons'））.append（$compile（“”）（scope））；
});
}
};
});

希望这有帮助。

谢谢Lalit。 我将您的代码粘贴一些更改以供使用（可能对搜索此解决方案的人有用）

var myApp=angular.module（'myApp'，[]）.controller（'MainCtrl'，function（$scope）{
$scope.store=“某物”；
});
//返回一个元素的指令，该元素在单击时添加按钮，该按钮在单击时显示警报
指令（“addbuttonsbutton”，function（））{
返回{
限制：“E”，
模板：“单击以添加按钮”
}
});
//用于添加单击时显示警报的按钮的指令
指令（“addbuttons”，函数（$compile）{
返回{
链接：函数（范围、元素、属性）{
元素绑定（“单击”，函数（）{
元素（document.getElementById（'space-for-buttons'））.append（$compile（“”）（scope））；
});
}
};
});

我在

示例代码的解决方案是：

CreateDomElementWithDataBinding
angular.module（'gemStore'，[]）.controller（'StoreController'，function（$scope，$compile）{
this.name='diamont'；
这个。明亮=3；
$scope.recognizeneElements=function（）{
var placeNewElement=angular.element（document.getElementById（'placeNewElement'）；
$compile（placeNewElement.contents（））（$scope）；
};
});
var changeDom=函数（）{
document.getElementById（'placeNewElement'）。innerHTML=“”；
};

为什么要这样做？为什么不在模板中添加另一个文本字段，然后用angular显示/隐藏它呢？无论如何，像这样与DOM打交道不是一种有棱角的方式，我也不指望它会起作用嗨，塞吉奥，这只是一个例子。现在我必须在遗留代码上使用angular。这段遗留代码使用一个框架，该框架通过ajax调用来更新（创建DOM元素）DOM。我可以重构这个框架，它不是我的：-（谢谢你的提问，它可以帮助其他人理解这个例子；-）你必须使用还是想要？这是两件不同的事情。如果是前者，我建议彻底重写（而不是逐渐增强）。如果你能说服企业在这方面花费时间/金钱，你会有更轻松的时间。我同意Sergio的观点，当然，进行深度重构是最好的主意。但客户只想使用角度，而不是重构（我试图改变这个想法，但他不想）：-（感谢您的想法，也感谢您之前没有发表评论。这是一个简化的示例。我无法避免创建DOM元素，它附带了现有的遗留代码。它是一个框架，通过更新DOM元素进行ajax调用以构建应用程序：-（感谢您的快速回答；-）谢谢Lalit。我粘贴了你的代码，并对其进行了一些修改，以便于工作（可能对搜索此解决方案的人有用）。