CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
NewDeveloper
NewDeveloper

Reputation: 130

Angular directive access value in scope

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.

Upvotes: 1

Views: 98

Answers (2)

Shaya
Shaya

Reputation: 2932

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>

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

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>

Upvotes: 1

Related Questions