How to make reusable component using Isolated Scope in AngularJS?

Question

I am reading the article on Directives and at the Isolated Scope section, I noticed

As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.

So I tried the example

Script.js

(function(angular) {
  'use strict';
angular.module('docsIsolationExample', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'my-customer-plus-vojta.html'
    };
  });
})(window.angular);

Actually what I am looking for is that if

$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; 
$scope.vojta = { sex: 'Male', something: 'Something else' }

How can I print name,address (from naomi) and sex, something (from vojta)?

The example in the documentation works fine, and the html code is available. What don't you understand? — JB Nizet
– JB Nizet, Commented Mar 26, 2015 at 16:34
@JB Nizet, Respected Sir, As I understand that we can use the isolated scope for reusable component. But I am not clear as how to do something as $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; $scope.vojta = { sex: 'Male', something: 'Something else' }; — priyanka.sarkar
– priyanka.sarkar, Commented Mar 26, 2015 at 16:44
Again: the example does that: it prints vojta or naomi, based on the directive parameter. You thus have a reusable directive that prints the user passed as parameter. What don't you understand in the example? — JB Nizet
– JB Nizet, Commented Mar 26, 2015 at 16:52

sylwester · Accepted Answer · 2015-03-26 16:39:06Z

1

Please see demo here http://plnkr.co/edit/oGOPwTqISTYrP5fwBl4t?p=preview

HTML:

 <my-customer name="vojta.name" address="vojta.address"></my-customer>

JS:

app.directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        name: '=',
        address:'='
      },
      templateUrl: 'my-customer-plus-vojta.html'
    };
  });

answered Mar 26, 2015 at 16:39

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

7 Comments

priyanka.sarkar Over a year ago

Sir, what I am trying to do is this $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; $scope.vojta = { sex: 'Male', something: 'Something else' }. How can i print this?

sylwester Over a year ago

@priyanka.sarkar have you seen demo plunkr?

priyanka.sarkar Over a year ago

Yes Sir, and also I tried to edit as under app.js ( $scope.naomi = { x: 'Naomi', y: '1600 Amphitheatre' }; $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };), index.html(<my-customer name="naomi.x" address="naomi.y"></my-customer> <my-customer name="vojta.name" address="vojta.address"></my-customer>), mycustomer-vojta.html(<h3>Customer</h3> <p>Customer Name: {{name}}</p> <p>Customer Address: {{address}}</p> <p>Customer Address: {{x}}</p>), but no result... sorry if i am in the wrong way..please guide

sylwester Over a year ago

@priyanka.sarkar please see here plnkr.co/edit/oGOPwTqISTYrP5fwBl4t?p=preview

priyanka.sarkar Over a year ago

i believe that the Plunker server is down so the link is not opening. Could you please edit

|

Collectives™ on Stack Overflow

How to make reusable component using Isolated Scope in AngularJS?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related