javascript - 动态地将 Angular 属性添加到旧的 html 表单

Question

我有一个项目，我目前正在尝试用 angular 1.x 从头开始​​重构一个依赖于 jquery 的旧系统。但是，有很多旧的 HTML 表单我想重用其中的大部分，所以我不想重新创建它们。如果有办法让它保持纯粹的 Angular ，我会喜欢它，但老实说，我不知道我会怎么做(或者我是否可以)。我对 Angular 还很陌生，所以它有很多内部工作原理我仍然不了解。

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

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

有什么我可以完成的:获取表单，将 ng-model="cl_fname"或其他内容添加到相关标签，然后显示表单？我已经到了可以获取 html 页面的地步，将其保存在范围内，然后使用 ng-bind-html 显示，但弄清楚如何向我无法弄清楚的特定元素添加 Angular 属性。

Answer 1

您可以使用 jQuery 和 attr() 方法实现这一点。

我创建了一个 plunker here这演示了如何向现有的 “普通” html 表单添加 Angular 。在示例中，我使用了 id 选择器，但您可以使用选择器的任意组合来确保您获得正确的元素。

下面是我的 Plunker 示例中的一个快速代码片段:

HTML:

<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>

JS:

// 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");

编辑:
刚刚意识到你想动态加载 html 表单。plunker (here) 的第 2 版现在将从外部资源(单独的 html 页面)动态加载 HTML 表单，将其注入(inject)当前页面，向其添加 Angular 绑定(bind)，然后获取 Angular 以识别它。

让 Angular 识别表单的关键是使用 $compile 对象 ( angular $compile documentation )。

同样，使用中的代码的快速片段:

HTML(主页):

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

HTML (myForm1.html):

<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>

JS:

// 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!';

}]);