How to display the property of an object in a directive?

Question

The object looks like this:

{"objectId":"5666759200b09f85717e8954","name":"TestNewSunflower"...

The directive:

.directive('breadcrumb', function() {
            return {
                restrict: 'EA',
                template: '<ol class="breadcrumb">' +
                    '<li><a href="#/building/{{building.objectId}}">{{building}}</a></li>' +
                    '</ol>',
                scope: {
                    building: "@"

How I'm using it:

<breadcrumb building="{{building}}"></breadcrumb>

But I'm unable to display the name property.

I tried building.name, building[name] but nothing works.

What's the proper way of doing this?

Answer 1

Using @ in scope, value will consider as text.

If you wanna use as an object,you have to parse with JSON.parse or angular.parse

Instead use building as two way.

Like this

building: "="

Then your html will be

<breadcrumb building="building"></breadcrumb>