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

您需要在帖子链接功能中编译生成的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);
        };
      }
    };
  });

这是一个有效的plunker

AngularJS：指向控制器的链接元素

1 个答案: