-1

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

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, 2016 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.
    – Watchmaker
    May 23, 2016 at 18:43
  • Possible dupe. See this question: stackoverflow.com/questions/31857735/… May 23, 2016 at 18:48
  • @MikeFeltman easier to say than to check. IMHO it's not duplicated
    – Watchmaker
    May 23, 2016 at 19:01
  • I was just trying to be polite. My apologies for that. May 23, 2016 at 19:03

2 Answers 2

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

8
  • 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, 2016 at 19:43
  • can you see this version? plnkr.co/edit/7iA3JMhuUlvIQN9ORs81?p=preview, check the updated post
    – shershen
    May 23, 2016 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. Anyway I need it to be done with the "Controller As" syntax.
    – Watchmaker
    May 24, 2016 at 8:07
  • gosh!, I've fogot this - bindToController: true check the updated code now
    – shershen
    May 24, 2016 at 8:26
  • I see your point but it is still mixing both syntax. I am posting my purely "controller as" syntax.
    – Watchmaker
    May 24, 2016 at 10:26
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.