如何将Angular功能添加到新添加的HTML中？

我有一个Angular的HTML页面。我想单击一个按钮，将一个角标记input添加到DOM。但是当我这样做时，新的input文本字段看起来不像我期望的那样工作。如何将Angular功能添加到新添加的HTML中？

我的HTML看起来像这样：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <script type="text/javascript"> 
     var app= angular.module("myApp",[]); 
     app.controller("myCtrl",function($scope){ 

     }); 

     $(function(){ 
      $("#button").click(function(){ 
       $("body").append("<input type=\"text\" ng-model=\"bar\"><br>{{bar}}"); 
      }); 
     }); 
    </script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <button id="button">click me</button> 
    <input type="text" name="something" ng-model="foo"><br> 
    {{foo}} 
</body> 
</html>

我可以使用角度的功能就好了当与input标签已经存在。当我在文本字段中输入内容时，会显示输出。但是当我点击按钮并出现新的文本字段时，输入它什么都不做。

我缺少什么？

我该如何解决这个问题？

来源

2016-12-11 Username

您不能混合使用JQUERY和Angular。你必须选择一个框架并坚持其原则。

为了在角度上添加一个控件“视图”，您可以使用“指令”。另一种选择是在您的模型中有一个对象，并且该对象有可能与您的控制器交互，这将通知查看添加另一个控件。

Angular是一个MVC框架，因此您不应该通过另一个框架来操作View（html）。 Angular旨在通过适当的分离或图层来修复和简化这种操作。

您可以参考这个其他职位上如何执行此：

How to dynamically add input rows to view and maintain value in angularjs ng-model as array item

来源

2016-12-11 00:27:54 Dalorzo

要做到这一点在AngularJS：

<body ng-app="myApp" ng-controller="myCtrl"> 
    <button id="button" ng-click="showBarInput=true">click me</button> 
    <div ng-show="showBarInput"> 
     <input type="text" ng-model="bar"><br> 
     {{bar}} 
    </div> 
    <input type="text" name="something" ng-model="foo"><br> 
    {{foo}} 
</body>

的AngularJS框架是一个模型 - 视图 - 无论框架。模型驱动视图。在这种情况下，$scope.showBarInput控制元素的可见性。

来源

2016-12-11 09:37:25 georgeawg

如何将Angular功能添加到新添加的HTML中？

回答

相关问题