Angular Isolated Scopes

// A directive with its own ISOLATED SCOPE. This way the directive doesn't accidentally 
// modify parent's scope values
// you would load this with <search-result-3 person-name="{{person.name}}" person-address="{{person.address}}"></search-result-3

/*
 <a href="#"  class="list-group-item">
    <h4 class="list-group-item-heading">{{personName}}</h4>
    <p class="list-group-item-text">{{personAddress}}</p>
</a>
*/
myApp.directive("searchResult3",function(){
    return{
        templateUrl: 'directives/searchResult.html'
        , replace: true     //will replace the original tag 
                            //rather than putting this html inside existing tag
        , scope:
        {
            personName: "@"   //tells us the directive expects a passed in value
                                // the @ sign means this will be text
            , personAddress: "@"
        }
        
    }
});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s