Directive to directive communication : controller empty ( ={ } )- AngularJS

Question

I'm new to angularJS and I'm trying to do some reusable code. I, of course, read the documentation and saw this tutorial.

The idea : A directive D1 to instantiate a popup A directive D2 to manage only it's content I want the D2 directive to send her errors to the D1 directive.

The problem : In the directive D2, the popupController is empty (Object {}).

Everyting works except when I try to access this controller, that's why I cut the code only on the concerned part.

My popupDirective :

app.directive('popup', function($compile){
    return {
        restrict: 'E',
        scope: {
            show: '=',
            title: "@popupTitle",
            notifier: "@notifier"
        },
        controller: 'popupController',
        replace: false,
        transclude: true,
        link: function(scope, element, attrs) {
            scope.dialogStyle = {};
            if (attrs.width)
                scope.dialogStyle.width = attrs.width;
            if (attrs.height)
                scope.dialogStyle.height = attrs.height;
            scope.hideModal = function() {
                scope.show = false;
            };
        },
        templateUrl: 'Popup.html'
    };
});

Her Controller :

app.controller('popupController', function($scope) {
    $scope.errorMessage = "";
    $scope.modalShown = false;
    $scope.toggleModal = function() {
        $scope.modalShown = !$scope.modalShown;
    };

    $scope.hideModal = function() {
        $scope.show = false;
    };

    $scope.hasNotifier = function()
    {
        return $scope.notifier;   
    };

    $scope.manageError = function(message) {
        if ($scope.hasNotifier())
        {
            $scope.resetContext();
            $scope.errorMessage = message;
            $scope.errorDomElement.slideDown(200).delay(10000).slideUp(200);
        }
    };
});

The contentDirective :

app.directive('contentDialog', function($compile) {
    return {
        restrict: 'E',
        scope: {},
        // Search for the  controller on the paren element
        require: '^popup',
        controller: 'ContentController',
        replace: true, // Replace with the template below
        link: function(scope, element, attrs, popupController) {
            ...                 
            scope.popupCtrl = popupController;
            console.log(popupController);
            popupController.manageError("salut");
            // HERE THE POPUPCONTROLLER IS EMPTY
            ...
  };
});

The content controller :

app.controller('ContentController', ['$scope', 'ContentRs', function($scope, UseCase) {
    ...
    $scope.updateContent = function()
    {
      if($scope.selectedContent.id !== -1)
      {
          var description = $scope.getSelectedContentDescription();
          ContentRs.update({
            id: $scope.selectedContent.id,
            name: $scope.selectedContent.name,
            description: description
          }, function(){
              // on sucess
               $scope.resetContext();
          }, function(){
              // on failure
               $scope.popupCtrl.manageError("Update failed.");
               // HERE THE POPUPCONTROLLER IS EMPTY
          });
      }
      else
      {
        console.log("Error");
      }
    };
}]);

Edit, I forgot the html : Main html :

<popup popup-title="Use case management" notifier="true" show='modalShown'
                                   width='330px' height='450px'>
     <content-dialog show='modalShown'></content-dialog>
</popup>

Thank you :)

Shanimal · Accepted Answer · 2014-03-13 12:36:43Z

4

The problem is that inside your popupController you only add the functions to the $scope, but not the controller itself. Change to the following inside your popupController:

  this.manageError = $scope.manageError = function(message) {
    if ($scope.hasNotifier())
    {
        $scope.resetContext();
        $scope.errorMessage = message;
        $scope.errorDomElement.slideDown(200).delay(10000).slideUp(200);
    }
};

edited Mar 13, 2014 at 12:36

Shanimal

11.8k7 gold badges67 silver badges82 bronze badges

answered Mar 13, 2014 at 11:10

David Losert

4,8221 gold badge28 silver badges31 bronze badges

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

4 Comments

ogdabou Over a year ago

Hi, thanks for your answer. I do not understand. If I inject the popupController like this, I won't be able to use my contentController right ? Maybe I missed something :/

David Losert Over a year ago

Ah sorry, i got confused with the two controllers. Yes you are right, you wouldnt be able to use it then - but i ask myself if that second controller is actually even useful, or couldnt you move the logic inside the linking function? the only real reason to set up a controller for a directive is if you want several directives to communicate with each other. This would be the case in your popup-Controller, but not in the contentController - or am i missing something?

ogdabou Over a year ago

@Charminbar In fact you solved my problem ! I had to use this.manageError and not $scope.managerError. If I only change that my popup is working well! Thank you :)

ogdabou Over a year ago

I understood that controllers were used to controls the datas (webservices requests etc..) and function in the link used to update the view (dom manipulation etc..). But maybe I am wrong, as in my contentController I just add and use functions to the $scope, I maybe have to rethink that.

Collectives™ on Stack Overflow

Directive to directive communication : controller empty ( ={ } )- AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related