2

<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 に指示するにはどうすればよいですか?

4

1 に答える 1