CODEWITHSUNDEEP
angularjs
Tuan Le
Tuan Le

Reputation: 37

AngularJS Custom Directive - Isolated Scope Issue

I'm trying to figure out why the following is not working as I expected. I thought it would show this : User : Jakob Jenkov User : John Doe

However, it's show this:

User : User :

HTML: 

<html ng-app="plunker">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>
<body ng-controller="MyController as $ctrl">
    <userinfo user="jakob"></userinfo>
    <userinfo user="john"></userinfo>
  </body>
</html>

JAVASCRIPT:

var myapp = angular.module('plunker', []);
myapp.directive('userinfo', function() {
    var directive = {};

    directive.restrict = 'E';

    directive.template = "User : <b>{{user.firstName}}</b> <b>{{user.lastName}}</b>";

    directive.scope = {
        user : "="
    }

    return directive;
});
myapp.controller("MyController", function() {
    var $ctrl = this;
    $ctrl.jakob = {};
    $ctrl.jakob.firstName = "Jakob";
    $ctrl.jakob.lastName  = "Jenkov";

    $ctrl.john = {};
    $ctrl.john.firstName = "John";
    $ctrl.john.lastName  = "Doe";
});

Upvotes: 1

Views: 32

Answers (2)

Matthew Cawley
Matthew Cawley

Reputation: 2818

You're using Controller As syntax, so you need to add the controller alias $ctrl to the variables that you pass in to your directive:

<body ng-controller="MyController as $ctrl">
  <userinfo user="$ctrl.jakob"></userinfo>
  <userinfo user="$ctrl.john"></userinfo>
</body>

Without $ctrl, angular will look for the variables directly on the $scope where they are not set and so undefined is passed in to your directive instead of the desired user objects.

Upvotes: 1

Jorge Valle
Jorge Valle

Reputation: 637

One way to do it is like this:

<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script>
    var myapp = angular.module('plunker', []);

    myapp.directive('userinfo', function() {

      var directive = {};

      directive.restrict = 'E';

      directive.template = "User : <b>{{user.firstName}}</b> <b>{{user.lastName}}</b>";

      directive.scope = {
        user : "="
      }

      return directive;
    });

    myapp.controller("MyController", function() {

      this.jakob = {
        firstName: "Jakob",
        lastName: "Jenkov"
      }
      this.john = {
        firstName: "John",
        lastName: "Doe"
      }

    }); 

  </script>
</head>
<body ng-controller="MyController as myCtrl">
  <userinfo user="myCtrl.jakob"></userinfo>
  <userinfo user="myCtrl.john"></userinfo>
</body>
</html>

Upvotes: 0

Related Questions