AngularJS: Link element to controller in directive

Question

I have a custom directive <my-configform></my-configform> in which I get a JSON array from an API during the compile stage and dynamically construct the element's DOM from:

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());
    });
  }
});

My problem is that the form is not bound to the controller after compilation. The elements are all in the DOM, ~~but the ConfigCtrl controller is not created and~~ no data binding has taken place. How can I tell Angular to bind the controller to my dynamically created form?

Have you tried adding the controller attribute to your directive definition? (e.g. controller: 'ConfigCtrl') Or did you use ng-controller at a higher level in your DOM? — Craig Squire
– Craig Squire, Commented Sep 20, 2013 at 15:47
Adding the controller attribute helped insofar as my ConfigCtrl is now instantiated, but there is still no data-binding between the elements in the form and their respective models in the controller scope. — jbaiter
– jbaiter, Commented Sep 20, 2013 at 15:55

mortalapeman · Accepted Answer · 2013-09-21 00:59:21Z

4

You need to compile the generated html inside the post linking function like below:

.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);
        };
      }
    };
  });

Here is a working plunker

edited Sep 21, 2013 at 0:59

answered Sep 21, 2013 at 0:46

mortalapeman

1,42512 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: Link element to controller in directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related