javascript - AngularJS：将元素链接到指令中的控制器

Question

我有一个自定义指令<my-configform></my-configform>，我在编译阶段从 API 获取 JSON 数组，并从以下位置动态构造元素的 DOM：

angular.module('mymodule').directive('myConfigform', function($http, $compile, $interpolate) {
  restrict: 'E',
  controller: 'ConfigCtrl', // Added as per Craig's suggestion
  compile: function(element) {
    var buildMyForm = function(data) {
      var template = $interpolate('<form role="form">{{form}}</form>');
      var formMarkup;
      // ... build formMarkup from data ...
      // just as a very simple example what it could look like:
      formMarkup = '<input type="checkbox" ng-model="config.ticked"> Tick me';

      return template({form: formMarkup});
    };
    $http.get('/api/some/endpoint').success(function(data) {
      element.replaceWith(buildMyForm());
    });
  }
});

我的问题是编译后表单没有绑定到控制器。元素都在 DOM 中，但ConfigCtrl没有创建控制器，也没有发生数据绑定。如何告诉 Angular 将控制器绑定到我动态创建的表单？

Answer 1

您需要在 post 链接函数中编译生成的 html，如下所示：

.directive('myConfigform', function($http, $compile, $interpolate) {
    return {
      restrict: 'E',
      compile: function(element) {
        var buildMyForm = function(data) {
          var template = $interpolate('<form role="form">{{form}}</form>');
          var formMarkup = '<input type="checkbox" ng-model="config.ticked"> Tick me';
          return template({form: formMarkup});
        };
        element.replaceWith(buildMyForm());
        return function(scope, element) {
          $compile(element.contents())(scope);
        };
      }
    };
  });

这是一个工作的笨蛋