Sharing Top Content from the Angular-sphere.

[SOLVED] Binding array to directive variable in AngularJS- Angular.js Recipes

  • I’m trying to get an array into a template so I can use the individuals values thereof.
  • My problem is that the attribute turns into a string once inside my template so it’s no longer accessible as {{var[0]}} and that will instead return the first character of the “string”, usually “[”

    Here is a simplified setup of the data:

    Here is a simplified portion of the HTML file that interacts with that data:

    and lastly here is a portion that is SUPPOSED to replace the custom tag with my own stuff:

    So here I am, if I try using value[0] I get [ If I try to get value[1] I get ” and so on.

  • Is there any help on using arrays inside the template of a directive?

You need to change the “@” into “=” and to pass in the array without the {{ }}

like this:

<my-customer-vars value=”varForward”>
</my-customer-vars>
<my-customer-vars value=”varBack”>
</my-customer-vars>

directive:

directive(‘myCustomerVars’, function($compile) {
return {
restrict: ‘E’,
scope: {
value: “=”
},
template:
‘<div>’+
‘<p class=”body-text”>Some stuff goes here</p>’+
‘<input type=”text” name=”firstinput” value=”{{value[0]}}”> – ‘+
‘<input type=”text” name=”secondinput” value=”{{value[1]}}”>’+
‘</div>’,
replace: true
}
});

This is happening because every expression inside a directuve attribute defined by a @ gets evaluated as only as a string, and in the other way it gets evaluated as binding expression. (with 2 way binding, so be careful).


@angular_recipe: Binding array to directive variable in AngularJS #Angular #AngularJS

I’m trying to get an array into a template so I can use the individuals values thereof. My problem is that the attribute turns into a string once inside my template so it’s no longer accessible as {{var[0]}} and that will instead return the first character of the “string”, usually “[“

Here is a simplified setup of the data:

“varForward”: [“100”, “1”], “varBack”: [“1”, “100”]

Here is a simplified portion of the HTML file that interacts with that data:

and lastly here is a portion that is SUPPOSED to replace the custom tag with my own stuff:

So here I am, if I try using value[0] I get [ If I try to get value[1] I get ” and so on. Is there any help on using arrays inside the template of a directive?

You need to change the “@” into “=” and to pass in the array without the {{ }}

like this:

directive:

This is happening because every expression inside a directuve attribute defined by a @ gets evaluated as only as a string, and in the other way it gets evaluated as binding expression. (with 2 way binding, so be careful).

Just another perspective – if the problem is just managing an array of strings in angular application I would use one of the following (or any similar):

Unless you are practicing creating your own angular directives (then just ignore my answer)

for fetching this scope variable:

Just change

to

If you would prefer not creating an isolate scope in the directive (such as when creating custom validation directives) you could pass the array as:

And then read the value in the linking function of the directive as:

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] Binding array to directive variable in AngularJS- Angular.js Recipes

Comments are closed, but trackbacks and pingbacks are open.