AngularJS directives data binding doesn't work

Question

DEMO

Here is a simplified version of the two directives I have, my-input and another-directive:

HTML:

<body ng-controller="AppCtrl">
  <another-directive>
    <my-input my-input-model="data.firstName"></my-input>
  </another-directive>
</body>

JS:

.directive('myInput', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      model: '=myInputModel'
    },
    template: '<input type="text" ng-model="model">'
  };
}).directive('anotherDirective', function($compile) {
  return {
    restrict: 'E',
    scope: {},
    compile: function(element) {
      var html = element.html();

      return function(scope) {
        var output = angular.element(
          '<div class="another-directive">' +
            html +
          '</div>'
        );

        $compile(output)(scope);
        element.empty().append(output); // This line breaks the binding
      };
    }
  };
});

As you can see in the demo, if I remove element.empty().append(output);, everything works fine, i.e. changes in the input field are reflected in controller's data. But, adding this line, breaks the binding.

Why is this happening?

PLAYGROUND HERE

Noah Solomon · Accepted Answer · 2014-10-07 23:29:40Z

2

The element.empty() call is destroying all child nodes of element. In this case, element is the html representation of another-directive. When you are calling .empty() on it, it is trying to destroy its child directive my-input and any scopes/data-bindings that go with it.

A somewhat unrelated note about your example. You should look into using transclusion to nest html within a directive, like you are doing with another-directive. You can find more info here: https://docs.angularjs.org/api/ng/service/$compile#transclusion

edited Oct 7, 2014 at 23:29

answered Oct 7, 2014 at 23:22

Noah Solomon

1,26115 silver badges24 bronze badges

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

Comments

tworivers · Accepted Answer · 2014-10-07 23:56:28Z

I think a little bit context as to what you are trying to do well be helpful. I am assuming you want to wrap the my-input directive in another-directive ( some sort of parent pane ). You could accomplish this using ng transclude. i.e

angular.module('App', []).controller('AppCtrl', function($scope) {
  $scope.data = {
    firstName: 'David'
  };
  $scope.test = "My test data";
}).directive('myInput', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      model: '=myInputModel'
    },
    template: '<input type="text" ng-model="model">'
  };
}).directive('anotherDirective', function($compile) {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    template : '<div class="another-directive"><div ng-transclude></div></div>' 
    };
});

Dylan · Accepted Answer · 2014-10-08 00:49:36Z

0

It works if you require ngModel

}).directive('anotherDirective', function($compile) {
return {
  restrict: 'E',
  require:'ngModel',
  scope: {},
...

answered Oct 8, 2014 at 0:49

Dylan

4,7831 gold badge22 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJS directives data binding doesn't work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related