Interaction of directive and controller in AngularJS

Question

I want to create a component that displays itself as a collapsible box. When it is expanded, it should show the transcluded content; when it is collapsed it should only show its label.

myApp.directive('collapsingBox', function() {

  return {
    restrict: 'E',
    transclude: true,
    require: '^ngModel',
    scope: {
      ngModel: '='
    },
    template: '<div ng-controller="CollapseController" class="collapsingBox"><div class="label">Title: {{ ngModel.title }}</div><br/><div ng-transclude ng-show="expanded">Test</div></div>',
    link: function($scope, element, attr) {
      element.bind('click', function() {
        alert('Clicked!');
        $scope.toggle();
      });
    }
  };

});

This component should be reusable and nestable, so I wanted to manage the values (like "title" and "expanded") in a controller that gets instantiated for every use of the directive:

myApp.controller('CollapseController', ['$scope', function($scope) {
  $scope.expanded = true;

  $scope.toggle = function() {
    $scope.expanded = !$scope.expanded;
  };
}]);

This "almost" seems to work: http://plnkr.co/edit/pyYV0MAikXThvMO8BF69

The only thing that does not work seems to be accessing the controller's scope from the event handler bound during linking.

link: function($scope, element, attr) {
  element.bind('click', function() {
    alert('Clicked!');
    $scope.toggle(); // this is an error -- toggle is not found in scope
  });
}

Is this the correct (usual?) way to create one instance of the controller per use of the directive?
How can I access the toggle-Function from the handler?

c0bra · Accepted Answer · 2015-07-06 15:26:41Z

1

Rather than using ng-controller on your directive's template, you need to put the controller in your directive's controller property:

return {
  restrict: 'E',
  transclude: true,
  require: '^ngModel',
  scope: {
    ngModel: '='
  },
  template: '<div class="collapsingBox"><div class="label">Title: {{ ngModel.title }}</div><br/><div ng-transclude ng-show="expanded">Test</div></div>',
  controller: 'CollapseController',
  link: function($scope, element, attr) {
    element.bind('click', function() {
      alert('Clicked!');
      $scope.toggle();
    });
  }
};

As it is CollapseController's scope will be a child scope of your directive's scope, which is why toggle() isn't showing up there.

answered Jul 6, 2015 at 15:26

c0bra

3,01225 silver badges34 bronze badges

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

2 Comments

Jan Over a year ago

This does what I want, mostly - although the visibility does not update, so I probably am missing some watch/binding. After reading the documentation and some tutorials I had been under the impression that the controller property is intended for sharing one controller for all instances (for communication between instances).

Jan Over a year ago

I had to use $scope.$apply() to update the values in .toggle().

Collectives™ on Stack Overflow

Interaction of directive and controller in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related