Angular directive access value in scope

Question

How can I read a directive value like the info attribute in the scope?

<div ng-controller="Controller">
  <my-customer info="naomi"></my-customer>
  <hr>
  <my-customer info="igor"></my-customer>
</div>

For example with this controller:

angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };

    //can I read the info value?
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'my-customer-iso.html'
    };
  });

You can find it on plunker, or similar in the angular documentation.

Mohit Tanwani · Accepted Answer · 2016-09-25 15:58:58Z

1

To associate a controller with a directive, you can use the Directive Definition Object's controller property. Either specifying the controller as a function or specifying the name of the controller.

Angular App

angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', '$attrs', function($scope, $attrs) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
    //Here are the attrs values
    console.log($attrs.stars);
    console.log($attrs.info);
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
            starts: '=stars',
            info: '=info'
      },
      //Associate a controller
      controller: 'Controller',
      template: "Name: {{customerInfo.name}} Address: {{customerInfo.address}}"
    };
  });

HTML

<div ng-controller="Controller">
  <my-customer info="naomi" stars="star1"></my-customer>
  <hr>
  <my-customer info="igor" stars="star2"></my-customer>
</div>

(function(angular) {
  'use strict';
angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', '$attrs', function($scope, $attrs) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
    //Here are the attr values
    console.log($attrs.stars);
    console.log($attrs.info);
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
            starts: '=stars',
            customerInfo: '=info'
      },
      //Associate controller
      controller: 'Controller',
      template: "Name: {{customerInfo.name}} Address: {{customerInfo.address}}"
    };
  });
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-directive-isolate-production</title>
</head>
<body ng-app="docsIsolateScopeDirective">
  <div ng-controller="Controller">
  <my-customer info="naomi" stars="star1"></my-customer>
  <hr>
  <my-customer info="igor" stars="star2"></my-customer>
</div>
</body>
</html>

edited Sep 25, 2016 at 15:58

answered Sep 25, 2016 at 14:35

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

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

8 Comments

NewDeveloper Over a year ago

Have you tested it? I get the errors for your first line "Unexpected token function" and "Uncaught Error: [$injector:modulerr]".

Mohit Tanwani Over a year ago

@NewDeveloper Wait for few minutes, let me give you full example

Mohit Tanwani Over a year ago

@NewDeveloper check now, you can see in the console.

NewDeveloper Over a year ago

$scope.info is already used, so i changed it to $scope.attrsInfo = $attrs.info. You can see it on plunker. But the value of $scope.attrsInfo in the controller is undefinded.

Mohit Tanwani Over a year ago

@NewDeveloper check my answer, I've updated, it's working now, just replace the code.

|

Shaya · Accepted Answer · 2021-09-18 16:30:24Z

0

As its name suggests, isolated scopes are isolated, and that's why you can use 2-way binding - like you're doing with customerInfo: '=info'.

When you make changes inside the myCustomer directive scope, it will bubble up in the scope hierarchy and will change the users object in your controller:

angular.module('docsIsolateScopeDirective', [])
   .controller('Controller', ['$scope', function($scope) {
       $scope.users = [{
           first_name: 'naomi',
           last_name: 'doe'
       },
       {
           first_name: 'igor',
           last_name: 'doe'
       }]
}])

And your template should look like this:

<div ng-controller="Controller" ng-repeat="user in users">
    <my-customer info="user"></my-customer>
    <hr>
</div>

edited Sep 18, 2021 at 16:30

answered Sep 25, 2016 at 15:17

Shaya

2,9723 gold badges30 silver badges38 bronze badges

Collectives™ on Stack Overflow

Angular directive access value in scope

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related