Javascript 向旧html表单动态添加角度属性

我有一个项目，我目前正在尝试重构一个旧系统，它从一开始就依赖于jquery，使用angular 1.x。然而，有很多旧的HTML表单我想重用其中的大部分，所以我不想重新创建它们。如果有一种方法可以让它保持纯粹的角度，我会很高兴，但我真的不知道该怎么做（或者我是否可以）。我对angular还比较陌生，所以它有很多内部工作我还不知道

我在谷歌和其他地方搜索过，包括这里，我甚至找不到其他人在谈论它。这告诉我，要么我搜索得很糟糕，要么我可能不应该去努力

所有的html页面都有相同的id字段，所以我觉得我可以可靠地基于此。例如：所有带有名字文本框的表单的id均为“cl_fname”

---

我是否可以完成以下任务：获取表单、在相关标记中添加ng model=“cl\u fname”或其他内容，然后显示表单？我已经到了可以获取html页面的地步，将其保存在范围内，然后使用ng bind html进行显示，但我不知道如何向特定元素添加角度属性。

可以使用

jQuery

和

attr（）

方法实现这一点

我创建了一个plunker，演示如何将angular添加到现有的“普通”html表单中。 在本例中，我使用的是

id

选择器，但您可以使用选择器的任意组合来确保获得正确的元素

下面是我的Plunker示例中的快速代码片段：

HTML:

编辑：
刚刚意识到您想要动态加载html表单。 的版本2现在将从外部资源（单独的HTML页面）动态加载HTML表单，将其注入当前页面，向其添加角度绑定，然后获取角度来识别它

识别表单的关键是使用

$compile

对象（）

同样，下面是正在使用的代码片段：

HTML（主页）：

---

如果你发布一个小的代码示例，它会有所帮助。这似乎正是我想要的。在我发布了最初的问题后，我显然一直在努力让它发挥作用，有趣的是，它看起来与你给出的大致相同。非常感谢，我知道它没有给太多的继续下去。我将您的答案标记为答案，除非有人提供了一些东西，不知何故没有使用jquery。

<div ng-app="myApp">
    <form id='myForm1' data-test="test2">
      <span>First Name:</span>
      <input type="text" id="myForm1_firstName"  />
      <input type="submit" id="myForm1_Submit" value="Go!" />
    </form>
  </div>

// set up angular
var myApp = angular.module('myApp', []);
myApp.controller('MyForm1Controller', ['$scope', function($scope) {
  $scope.firstName = 'Angular Working!';
}]);

// use jQuery to add the relevent attributes to our form
var jqMyForm1 = $('form#myForm1');
var jqTxtFirstName = jqMyForm1.find('input[type="text"]#myForm1_firstName');
//add controller to form
jqMyForm1.attr('ng-controller', 'MyForm1Controller');
//bind the textbox to the angular 'firstName' variable
jqTxtFirstName.attr('ng-model', "firstName");

  <div ng-app="myApp" ng-controller="LoadingController"></div>

<form id='myForm1' data-test="test2">
  <span>First Name:</span>
  <input type="text" id="myForm1_firstName"  />
  <input type="submit" id="myForm1_Submit" value="Go!" />
</form>

// set up angular
var myApp = angular.module('myApp', []);
// main controller for loading the dynamic form
myApp.controller('LoadingController', ['$scope','$http','$compile', function($scope,$http,$compile) {
  $scope.loadHtmlForm = function(formURL) {
    $http.get(formURL).then(function successCallback(response){
      var jqForm = $(response.data);

      var jqTxtFirstName = jqForm.find('input[type="text"]#myForm1_firstName');
      //add controller to form
      jqForm.attr('ng-controller', 'MyForm1Controller');
      //bind the textbox to the angular 'firstName' variable
      jqTxtFirstName.attr('ng-model', "firstName");

      $('div').append(jqForm);
      $compile(jqForm[0])($scope);
    });
  }

  $scope.loadHtmlForm('myForm1.html');
}]);

// form controller for managing the data
myApp.controller('MyForm1Controller', ['$scope', function($scope) {
  $scope.firstName = 'Angular Working!';

}]);