AngularJS: How to Pass Strings in Directives Without the Need for Quotation Marks

Question

AngularJS: How to Pass Strings in Directives Without the Need for Quotation Marks

Check out this custom directive I made:

HTML:

<p-custom-test item="'example'"></p-custom-test>

JavaScript:

.directive('pCustomTest', function() {
    return {
        scope: {
            item: '=?'
        },
        templateUrl: 'components/customTemplate.html',
        controller: 'customController'
    };
});

I want to pass 'example' as a string without the '', like this:

<p-custom-test item="example"></p-custom-test>

Even though it's possible via the attributes parameter in link, in this scenario, I'm passing parameters straight to scope.

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

If I could pass 'bla' as a string without the need for '' around it, that would be ideal:

To achieve this, you can simply use text binding (@) instead of two-way binding.

.directive('pTest', function() {
    return {
        scope: {
            something: '@?' //<-- This is where you specify
        },
        templateUrl: 'components/testTemplate.html',
        controller: 'testController'
    };
});

With text binding, if you want to bind scope properties, you can use interpolation. For example, if bla is a scope variable holding a string, you can simply do:

 <p-test something="{{bla}}"></p-test>

Plnkr

Answer 2

If I could pass 'bla' as a string without the need for '' around it, that would be ideal:

To achieve this, you can simply use text binding (@) instead of two-way binding.

.directive('pTest', function() {
    return {
        scope: {
            something: '@?' //<-- This is where you specify
        },
        templateUrl: 'components/testTemplate.html',
        controller: 'testController'
    };
});

With text binding, if you want to bind scope properties, you can use interpolation. For example, if bla is a scope variable holding a string, you can simply do:

 <p-test something="{{bla}}"></p-test>

Plnkr

AngularJS: How to Pass Strings in Directives Without the Need for Quotation Marks

Answer №1

Similar questions

Switching the navigation menu using jQuery

AngularJS + Material's smooth scroll feature allows you to effortlessly navigate back to

What is the best way to attach an EventListener to all DOM elements with a particular class?

Guide to changing a 10-digit number field to a string field in MongoDB

Calculating the frequency of a variable within a nested object in an Angular application

Executing AjaxStart in a JavaScript file for a specific page selection

What is the method for storing a DOM node inside a JavaScript variable using jQuery?

Is there a way to display the true colors of a picture thumbnail when we click on it?

Using jQuery to smoothly transition the page: first fade out the current content, then switch the background

Troubleshooting problem with Angular's ng-repeat directive in dealing with varying number of child objects

URL-based Angular Material Autocomplete feature

Button inside form not triggering jQuery click event

Scrolling horizontally in md-list

When using the mui joy library, obtaining the input value upon submission may result in the retrieval of an "unidentified" response

Where is the source of this ever-changing image?

High RAM consumption with the jQuery Vegas plugin

To properly handle this file type in React, ensure you have the correct babel loader installed

Tips for displaying dynamic content in VueJS?

I'm experiencing issues with the autofocus attribute when using the bmd-label-floating feature in Bootstrap Material Design version 4.1.1

Enabling communication between two single file components