Call controller function when directive attribute changed

Question

My code so far:

 .directive('ngSpreadsheet', function () {
      return {
          restrict: 'EA',
          scope: {
              curpart: '='
          },
          template: '<div id="dataTable" class="dataTable"></div>',
          controller: SpreadsheetController,
          link: function (scope, element, attrs) { 
              scope.$watch('curpart', function (val) {
                  console.log('curpart value changed, new value is: ' + val);
                  // here i want to call a function of the SpreadsheetController 
                  // or is there a better way, executing stuff when an attribute changed?
              });
          }

      }
  })


var SpreadsheetController = (function () {
  ...

  SpreadsheetController.prototype.curPartChanged = function () {
        console.debug('curPartChanged');
    };
})();

you should pass function name as attribute into directive using '&' feature in directive stackoverflow.com/questions/15991137/… — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Dec 18, 2013 at 17:25
is there no better way? I think setting the connection in my html is bad style? — daniel
– daniel, Commented Dec 18, 2013 at 17:27

Community · Accepted Answer · 2017-05-23 11:56:45Z

1

The fourth parameter to a link function is the controller; I would recommend getting access that way.

link: function (scope, element, attrs, controller){
    //...
    controller.curPartChanged(...);
    //...
}

I can't seem to link directly to the anchor, but look in this doc for the section on LINK. You can search for "A controller instance if at least one directive on the element defines a controller" to find the exact section.

EDIT:

If you'd like to watch an attribute of a directive, I would consider the $observe function, which is very similar to $watch. Head to this SO post to learn more.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Dec 18, 2013 at 18:15

Hylianpuffball

1,56110 silver badges15 bronze badges

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

Comments

Patrick · Accepted Answer · 2013-12-18 18:52:17Z

If you want to get reference to your controller in your directive, then require your own directive. See: http://jsfiddle.net/7LnrZ/22/

var mod = angular.module("myapp", []);

mod.controller("SimpleCtrl", function ($scope) {
    var part = {};
    part.curpart = 1;

    $scope.part = part;

    $scope.increasePart = function () {
        part.curpart++;   
    }
});

var SpreadsheetController = function () {
    console.log("Instantiating SpreadsheetController");    
}

SpreadsheetController.prototype.curPartChanged = function () {
    console.log('curPartChanged');
}

mod.directive("ngSpreadsheet", function ($window) {
    return {
        restrict: 'EA',
        scope: {
            curpart: '='
        },
        require: "ngSpreadsheet",
        template: '<div id="dataTable" class="dataTable"></div>',
        controller: SpreadsheetController,
        link: function (scope, element, attrs, ctrl) { 
            scope.$watch('curpart', function (val) {
                console.log('curpart value changed, new value is: ' + val);
                ctrl.curPartChanged();
              });
          }
    }
});

Compiling order for a directive:

Directive Controller is called/created
Directive pre-link function is invoked
- Child directive(s) of directive controller is created
- Child directive(s) of directive pre-link is invoked
- Child directive(s) of directive post-link is invoked
Directive post-link function is invoked

Nemesarial · Accepted Answer · 2013-12-18 18:09:31Z

0

Communication between a directive and the controller that hosts it should happen via an event call. scope.$emit will send such an event, while $scope.$on will catch events on the other side.

.directive('ngSpreadsheet', function () {
    return {
        restrict: 'EA',
        scope: {
            curpart: '='
        },
        template: '<div id="dataTable" class="dataTable"></div>',

        controller: function($scope){
            $scope.$on('curpart.change',function(data){
            console.log('curpart changed.. the new value is: ',data);
        }),

        link: function (scope, element, attrs) { 
            scope.$watch('curpart', function (evt,val) {
                console.log('curpart value changed, new value is: ' + val);
                scope.$emit('curpart.change',val);
            });
        }        
    }
});

edited Dec 18, 2013 at 18:09

answered Dec 18, 2013 at 18:03

Nemesarial

5175 silver badges12 bronze badges

2 Comments

Hylianpuffball Over a year ago

I was under the impression that $emit and $on were for parent-child scope communication, not directive-controller communication.

Nemesarial Over a year ago

I see no reason why one cannot use events to effect communication between different elements within the same scope. In the case of a directive, there is a shared scope between the different parts of a directive - which makes events a great mechanism to communicate between the different parts of a directive.

Collectives™ on Stack Overflow

Call controller function when directive attribute changed

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related