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

Question

我有一个Angular的HTML页面。 我想单击一个将Angular input标签添加到DOM的按钮。 但是，当我这样做时，新的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。 您必须选择一个框架并坚持其原则。

为了添加一个控件，您可以使用“ Directives ”。 另一个选择是在模型中有一个对象，并且该对象有机会与您的控制器交互，这将通知View添加另一个控件。

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

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

如何动态添加输入行以查看和维护angularjs ng-model中的值作为数组项

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 个解决方案

解决方案1
2 已采纳 2016-12-11 00:27:54

解决方案2
0 2016-12-11 09:37:25

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-12-11 00:27:54

解决方案2 0 2016-12-11 09:37:25

解决方案1
2 已采纳 2016-12-11 00:27:54

解决方案2
0 2016-12-11 09:37:25