AngularJS - Change the scope of a directive

Question

I'm trying to set up an Angular Directive so that I can re-use a piece of HTML. I have managed to achieve this, but the problem I am facing is when I want to pass some value into that templated HTML, from the containing HTML.

For simplicity's sake, I will use an example of a customer that has multiple addresses (in this context, the customer is an object and each address instance is another object attached to the customer).

Example of the data:

var customer = {
    forename: "John",
    surname: "Smith",
    address1: {
        street: "123 Street",
        town: "Georgeville",
    },
    address2: {
        street: "67 Maple Grove",
        town: "SomeTown"
    }
};

Here is an example of my directive setup:

var module = angular.module(...);
module.directive("address", function () {
    return {
        restrict: 'A',
        templateUrl: '/AddressView.html'
    };
});

And my attempted usage:

<div ng-model="customer">
    <div address></div>
    <div address></div>
</div>

And this is what I would like to do to be able to pass the customer's addresses across to the templated HTML:

<div ng-model="customer">
    <div address ng-model="customer.address1"></div>
    <div address ng-model="customer.address2"></div>
</div>

I may have misunderstood the purpose of directives, or this may not be possible, but if anyone has any suggestions they would be greatly appreciated.

Let me know if you need me to add any further information.

Edit

Here is a Plunker that I have set up to try to illustrate what I am trying to achieve.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

you need to isolate the scope for your directive so that things don't get confused for angular. And your object is better structure this way:

var customer = {
    forename: "John",
    surname: "Smith",
    addresses: [
        address1: {
            street: "123 Street",
            town: "Georgeville",
        },
        address2: {
            street: "67 Maple Grove",
            town: "SomeTown"
        }
    ]
};

this way you can do this:

<div class="customer">
    <div address ng-repeat="address in customer.addresses">
        {{address.town}} {{address.street}}
    </div>
</div>

I don't know why you'r using ng-model here?!
This is an example, but if you provide a plunker with an example code helping you will be easier.

Update:

First your ng-controller was in the wrong place you need to move it up so the address directive could be in the scope of the controller so it could access the address object.
Second you have 2 undefined variables: street and town.
And you need to isolate the scope so each directive don't mess with the variables of the other one.

Here's a working plunker.
Hope this help.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 12, 2013 at 9:30

Yahya KACEM

2,5018 gold badges34 silver badges63 bronze badges

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

3 Comments

Samuel Slade Over a year ago

Thanks for the response. I am trying to work out how I could use that address HTML in multiple places (not necessarily within a collection of objects - I might have singular objects that I wish to pass into it). I will look into setting up a Plunker example.

Samuel Slade Over a year ago

Brilliant! It was the isolation I was missing and the passing of the object through the directive attribute. Time to read up on scope isolation. Cheers!

Yahya KACEM Over a year ago

Check this website egghead, it has a great videos on AngularJS and isolate scope from video 16 through 20 and other interesting stuff.

Collectives™ on Stack Overflow

AngularJS - Change the scope of a directive

1 Answer 1

Update:

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related