Question

我有一个带Angular的HTML页面。我想单击一个向DOM添加Angular input标记的按钮。但是当我这样做时，新的input文本字段似乎不像我期望的那样工作。

我的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标记时，我可以正常使用Angular的函数。当我在文本字段中键入内容时，会显示输出。但是当我点击按钮并出现新的input文本字段时，输入它就什么都不做。

我错过了什么？

我该如何解决这个问题？

Answer 1

你不能以你的方式混合JQUERY和Angular。你必须选择一个框架并坚持其原则。

为了添加一个控件，角度为“View”，您可以使用“指令”。另一个选择是在模型中有一个对象，此对象与您的控制器交互的机会，这将通知视图添加另一个控件。

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

您可以参考另一篇关于如何执行此操作的帖子：

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

Answer 2

在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框架是一个Model-View-Whatever框架。该模型驱动视图。在这种情况下，$scope.showBarInput控制元素的可见性。

如何为新添加的HTML添加Angular功能？

2 个答案: