AngularJS directive: scope with named controller

Question

I have the example below.

HTML:

<body ng-controller="MainCtrl as MgtCtrl">
    <p>Hello {{MgtCtrl.name}}!</p>
    <p>Result is {{MgtCtrl.result}}!</p>
    <output-content data="MgtCtrl.name" result="MgtCtrl.result"></output-content>
</body>

JavaScript:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  var MgtCtrl = this;

  MgtCtrl.name = 'World';
  MgtCtrl.result = "no";

  MgtCtrl.changeLabel = function() {
    alert('changeLabel');
    MgtCtrl.result = 'yes';
  }
});

app.directive('outputContent', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
    scope: {
      data: '=',
      changeLabel: '&',
      result: '='
    },
    controller: 'MainCtrl',
    controllerAs: 'MgtCtrl'
  };

});

ouputContent.html:

<div>
  {{data}}
  <button ng-click="MgtCtrl.changeLabel()">Change</button>
</div>

Plunker is: http://plnkr.co/edit/BW8VDyCaRnRgxE8I9JJy

I would like the result to be 'yes' when I click on the 'Change' button.

It doesn't work because of the named controller.

Could you please explain to me how to write the directive to do so ?

Regards.

Jesús Quintana · Accepted Answer · 2015-05-26 07:59:54Z

2

You never was binding the scope variables to the named controller in the directive.

You must add the attribute bindToController: true to the directive definition like this plunker:

http://plnkr.co/edit/2QdnkpeuTM6adG9KoyJT?p=preview

Directive code:

app.directive('outputContent', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
    scope: {
      data: '=',
      changeLabel: '&',
      result: '='
    },
    controller: 'MainCtrl',
    controllerAs: 'MgtCtrl',
    bindToController: true
  };

});

This go to add the data and result binding to the respective directive controller.

answered May 26, 2015 at 7:59

Jesús Quintana

1,81313 silver badges18 bronze badges

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

Comments

Mikalai · Accepted Answer · 2015-05-26 08:05:17Z

0

I think in this case you don't need to specify controller in the directive.

app.directive('outputContent', function() {
return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
    scope: {
      data: '=',
      changeLabel: '&',
      result: '='
    }
  };

});

Also html shoul be updated:

<body ng-controller="MainCtrl as MgtCtrl">
    <p>Hello {{MgtCtrl.name}}!</p>
    <p>Result is {{MgtCtrl.result}}!</p>
    <output-content data="MgtCtrl.name" result="MgtCtrl.result" change-label="MgtCtrl.changeLabel()"></output-content>
  </body>

answered May 26, 2015 at 8:05

Mikalai

1,5258 silver badges21 bronze badges

Collectives™ on Stack Overflow

AngularJS directive: scope with named controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related