Adding a Directive to a Controller using "Controller as" syntax

Question

I have been learning about the kind of "new" "Controller as" syntax. While I find that the syntax is clearer for readability sometimes to do a relative simple thing it just gets more complicated, for example when adding a Directive to a Controller.

How would this simple sample be done with the "Controller As" syntax?

Plunk Sample

I tried something like this:

app.directive('myCustomer', myCustomer);

function myCustomer() {
    return {
      restrict: 'E',
      scope:{ customer: '=info'},
      //templateUrl: 'my-customer.html',
      template:'Name: {{vm.customer.name}} Address: {{vm.customer.address}}',
      controller: Controller,
      controllerAs: 'vm',
      bindToController: true 
    };
  }

I don't quite get it to work just as the regular "$scope" syntax. Maybe I am missing something.

Note: The sample uses Angular 1.5.5

The code in the body of your question implies that your directive template has a corresponding controller but your plunker does not. So, which of those is what you want us to look at? If your directive template has a corresponding controller, where is the code for that? — jbrown, May 23 '16 at 18:22
Sorry, I just corrected it. The Plunk is an example from the Angular official docs and I tried to code it with "controller as" syntax following [John Papa style guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y075). — Watchmaker, May 23 '16 at 18:43
Possible dupe. See this question: http://stackoverflow.com/questions/31857735/using-controlleras-with-a-directive — Mike Feltman, May 23 '16 at 18:48
@MikeFeltman easier to say than to check. IMHO it's not duplicated — Watchmaker, May 23 '16 at 19:01

shershen · Accepted Answer · 2016-05-24T08:26:15.773

1

Check this fork of your plunk: https://plnkr.co/edit/7iA3JMhuUlvIQN9ORs81?p=preview

.directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      controllerAs: 'vm',
      controller: ['$scope', function(scope){
        console.log(scope.customerInfo);
      }],
      templateUrl: 'my-customer-iso.html'
    };
  });

UPD

code should be like so:

(function(angular) {
  'use strict';
angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      controllerAs: 'vm',
      bindToController: true, //the  missing line!!
      controller: 'dirCtrl',
      templateUrl: 'my-customer-iso.html'
    };
  })
  .controller('dirCtrl', ['$scope', dirCtrl]);

  function dirCtrl() {
    //var vm = this; //no need in this!
}

})(window.angular);

and

 Name: {{vm.customerInfo.name}} Address: {{vm.customerInfo.name}}

in the template

edited May 24 '16 at 08:26

answered May 23 '16 at 19:11

shershen

9,875
11
39
60

that Plunk does not work for me. Anyway it is not using the "controller as" syntax. The Plunk I attached is from the official angular docs and shows the usual "$scope" syntax. Maybe you didn't save the latest version of your Plunk. – Watchmaker May 23 '16 at 19:43
can you see this version? https://plnkr.co/edit/7iA3JMhuUlvIQN9ORs81?p=preview, check the updated post – shershen May 23 '16 at 19:48
Sorry @shershen, but it seems your added code is doing nothing. I removed it and I left it as the [original version](https://plnkr.co/edit/KX5qfGuX7q1L8458i2Dh?p=preview). Anyway I need it to be done with the "Controller As" syntax. – Watchmaker May 24 '16 at 08:07
gosh!, I've fogot this - ```bindToController: true``` check the updated code now – shershen May 24 '16 at 08:26
I see your point but it is still mixing both syntax. I am posting my purely "controller as" syntax. – Watchmaker May 24 '16 at 10:26
Where it is mixing both syntax??? In my last update it was correctly showing ```{{vm.customerInfo.name}}``` in the template. It included ```bindToController: true,``` property that you missed initially, that's why you code didn't work! If the cofusion is in ```function dirCtrl() { //var vm = this; //no need in this!}``` - it can be removed, as it's states quite clearly in **no need in this** comment! And now you just now copy-pasting this soultion into your question, nice – shershen May 24 '16 at 10:36
First, my solution never missed `bindToController: true`. And second, my final solution is NOT a copy-paste of yours. I appreciate your help but as I said initially I didn't want to use the `$scope` usual syntax. – Watchmaker May 24 '16 at 10:46
In the shershen's solution was better than mine, although it uses the $scope for the "Controller". – Watchmaker May 26 '16 at 10:35

Watchmaker · Answer 2 · 2016-05-26T10:28:10.743

I din't manage to fully replicate the initial example from the official angular docs. Directives are quite tricky and I was missing something important about the Isolate Scope "=". I was not getting the value from the controller through the directive with the "=" as the original docs example. @shershen's answer is the right one.

(function() {

  'use strict';
  var app= angular.module('docsIsolateScopeDirective', []);

  app.controller('Controller', [function() {
    var vm=this;
    vm.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    vm.igor = { name: 'Igor', address: 'Homeless' };

    vm.name="John";
  }]);

  app.directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {

      },
      templateUrl: 'my-customer-iso.html',
      controller: 'Controller',
      link: function(scope, elem, attr, ctrl) {
                var variableName=attr.info;
                scope.customerInfo=ctrl[variableName];
            }
    };
  });

})();

Here is the final plunk.

Adding a Directive to a Controller using "Controller as" syntax

2 Answers2