Access attribute value inside template in Angularjs

Question

I have created a directive and passed attribute as object(name/value pair) of string. However if i try to access the attribute value inside the template, it is not getting evaluated. The attribute is passed like below

<testcomponent  myInfo="{firstname:'green',lastname:'Woods'}"></testcompone>

The template is define like below

   template: '<div>This will not run fine..! </div>'+
        '<div> This first name is: {{myInfo.firstname}} </div>',

I have created an islolated scope like below

  scope: {
       info: '=myInfo',
    },

The jsfiddle is @https://jsfiddle.net/visibleinvisibly/be4ww6vu/

The variable({{myInfo.firstname}}) needs to be evaluated but it is not happening.I am looking for a solution which doesnt need to create a controller(i am be wrong too)

Thanks in advance, jason

I'd rather suggest you to create an array of name value pair and pass the name of array in the attribute value. Try this and let me know if that works — Rehban Khatri
– Rehban Khatri, Commented Apr 30, 2016 at 12:58
Thank you for creating a fiddle. Made this substantially easier to answer! — random_user_name
– random_user_name, Commented Apr 30, 2016 at 13:05
One more quick note - in your fiddle, you were using Angular 1.0 - I'm hoping that you are actually using / able to use 1.4+? There are some differences that would benefit you. (2.0 is different, so if you are learning angular, you MAY want to consider learning 2) — random_user_name
– random_user_name, Commented Apr 30, 2016 at 13:13

random_user_name · Accepted Answer · 2016-04-30 13:04:21Z

There are a few problems (identified below) and a few tips for using Angular as well.

Here's a working fiddle

Angular is case-sensitive, and "particular" about attribute names. If you want your attribute to be myInfo in your directive, then in the markup you need to set it as my-info. Angular automatically adapts the name from my-info in the markup into myInfo in the directive.
Your markup (where you are attempting to output the name) references myInfo, however your scope declaration assigns that to the scope variable info. In order to output the name, you need to change it to {{info.firstname}}.

Below is the revise code, with comments:

<div ng-app="testApp" >
  <!-- Issue #2: If you want camel-case "myInfo", angular expects the attribute to be "my-info". -->
  <test-component   
  my-info="{firstname: 'green',lastname: 'Woods'}"/>
</div>

And the directive:

var module = angular.module('testApp', [])
    .directive('testComponent', function () {
    return {
        restrict: 'E',
        // Issue #1: The template referenced 'myInfo', but your scope was assigning that to 'info'.
        template: '<div>This will not run fine..! </div>'+
        '<div> This first name is: {{info.firstname}} </div>',
        scope: {
           /* Hints: 
                = is two way-binding "deep" watch.  
                =* is "shallow" watch, and on this simple object, that is all you need.  
                @ is text-binding (for reference)
           */
           info: '=*myInfo',
        },
        controller: function($scope) {
        },
        link: function (scope, element, attrs) {
        }
    };
});

Lastly - normally (in my experience) you would not set the value of the attribute directly in the markup, but rather you would reference a $scope variable from your controller, and assign the value in your controller.

@visibleinvisibly - glad I could help. if this answer solved your problem, please accept it by clicking the checkmark to the left of the answer.

Collectives™ on Stack Overflow

Access attribute value inside template in Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related