Issue with Custom Directive: Receiving Token Error for Expression in Isolated Scope in Angular

(The following messages, code snippets, etc, have been slightly altered for clarification)

The error message received is as follows:

Syntax Error: Token 'promiseObject' is unexpected, expecting [:] at column 3 of the expression [{{promiseObject?promiseObject.activeDEM:0}}] starting at [promiseObject?promiseObject.activeDEM:0}}].

The issue can be explained with the following code snippet:

Here is an example of the HTML being used:

<count-up id="feafdcds" duration="1" end-val='{{promiseObject?promiseObject.value:0}}' class="number" ></count-up>

The directive being utilized has an isolated scope. When the isolated scope is removed, the error disappears. However, without the isolated scope, monitoring attribute changes becomes a challenge.

angular.module('core-metronic').directive('countUp', ['$filter',
    function ($filter) {

        return {
            restrict: 'E',
            scope: {
                endVal: '='
            },
            link: function ($scope, $el, $attrs) {
                $scope.$watch('endVal',function(newValue,oldValue)
                {
                    if(newValue)
                        alert(newValue); 
                },true);

                //...additional code...

            }

        }
    }
]);

Answer №1

Using the angular two-way-binding feature is not possible

endVal: '='

when dealing with an angular expression like this one

{{promiseObject?promiseObject.value:0}}

Angular attempts to update the binded variable when the value changes, but since endVal is meant to be bound to an expression and not a variable, it causes confusion for Angular.

You have two options:

  1. If you do not require the value of endVal outside of the directive, you can use

    endVal: '@'

instead, and remove the evaluation braces in the template as shown

<count-up id="feafdcds" duration="1" end-val='promiseObject?promiseObject.value:0' class="number" ></count-up>

This approach will set the value of endVal to either '0' or a string containing the value of promiseObject. Keep in mind that the value will be treated as a string, requiring potential casting elsewhere in your code. However, this method will not update the value of promiseObject outside of the directive.

  1. If you need the updated value outside of the directive (e.g., in promiseObject as promiseObject.value), then you must bind endVal to a variable. In this case, keep using

    endVal: '='

but adjust the template as follows

<count-up id="feafdcds" duration="1" end-val='promiseObject.value' class="number" ></count-up>

With this setup, Angular will always sync the value of promiseObject.value with endVal updates. Ensure that promiseObject is consistently available and initialized properly if you choose this method. You may want to initialize promiseObject with a default value (e.g., 0) in your outer controller, such as:

promiseObject = {
    value: 0
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Simulate a new Date object in Deno for testing purposes

Has anyone successfully implemented something similar to jest.spyOn(global, 'Date').mockImplementation(() => now); in Deno? I've searched through the Deno documentation for mock functionality available at this link, as well as explored t ...

Struggling with adding headers in React application

When I try to include an h1 heading, either the heading doesn't show up if I comment out the buttons, or if I comment out the heading, then the buttons don't display. But when both are included, nothing is displayed. Any suggestions on how to fix ...

How can I prevent text highlighting on a website?

Is there a way to lock the copy button on my site without restricting the save as button, which is activated by right click? I want users to be able to save the website as an HTML file, but prevent them from copying text. Can this be achieved using Javas ...

Assistance required for activating an unidentified function or plugin within a Chrome extension

I am currently working on a project involving a chrome extension designed to automate tasks on a specific website. My main focus right now is trying to trigger the click event of a link that has an event handler set up through an anonymous function as show ...

Steps to create a slideup effect using JavaScript

Upon clicking the answer text area for the first time, a message box will appear. Your Answer Thank you for contributing an answer to this platform! Please remember that this is a Q&A site, not a forum for discussion. Include specifics and share you ...

Determine the quantity of items within a JSON array

There is a json array located at the following url: http://localhost/heart/api/restApiController/dataset.json The structure of the json array is as follows: [ { Weight: "3", Smoking: "1", Exercising: "0", Food_habits: ...

Identifying Inactivity in Cordova Android Applications

Hey there! So, I've created a flashlight/torch app that can be found at the following link: https://github.com/Skelware/Fancy-Flashlight. This app utilizes a Cordova plugin available here: https://github.com/Skelware/Cordova-Flashlight. For now, my m ...

JavaScript functions with similar parent names

Explain a function that has identical functionality to its parent parent.document.getElementById(source).innerHTML should be the same as other-function-name.document.getElementById(source).innerHTML ...

Can you add links or buttons to the page view using Directus v9?

In my Directus 9 project, I have a table dedicated to contacts that includes their emails and a special button leading to an external site. I am wondering if it is possible to make the email address clickable (as a mailto: link) and still display the spec ...

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

I keep a notebook that contains the following entries: https://i.stack.imgur.com/MLdO0.png For information on OneNote APIs, you can refer to this link (paragraph class selected already) https://learn.microsoft.com/en-us/javascript/api/onenote/onenote.p ...

Integrate Chrome extension using code

Is there a way to programmatically load a Chrome extension? Can it be done using web driver with external extension preferences, or perhaps through JavaScript or another scripting language? ...

The watch feature is not functional when used within a modal that has been included

I am trying to incorporate a watch expression into a modal that is part of an HTML file. In my demo, I have 2 watches: one is functioning properly and the other is not. Click here for more information. Thank you ...

Change the background color of a particular row in a table using Vue.js to be red

I am having an issue with a regular table - when I click on a specific row, I want only that row to turn red. Below is the code snippet that I have attempted: <tr role="row" v-for="(proxy, key) in this.ProxiesList" @click.prevent=&q ...

The value is not getting set after calling React Hook UseState

I am currently working on a React component that handles payment processing. There is a part of my code where I utilize the useEffect hook alongside useState to set certain values. Check out the code snippet below: React.useEffect(()=>{ axiosFetch ...

Oops! We encountered an internal server error while trying to resolve the import for "@vue/server-renderer"

Several months ago, I created a Vue 3 project using Vite and everything was running smoothly. However, today when I tried to make a small modification, an error occurred at runtime. All Vue files are showing the same error message: [vite] Internal server ...

Anticipate commitments during onbeforeunload

Is there a way to trigger a $http.get request when the page is closed? I encountered an issue where promises cannot be resolved because once the final method returns, the page is destroyed. The challenge lies in the fact that onbeforeunload does not wait ...

Encountering Problems Retrieving API Information in React.JS

Currently, I'm tackling a project involving a React web application and running into an issue while trying to display specific data retrieved from a mock API: Below is the code snippet in question: import React, { Component } from 'react'; ...

Blogger's homepage URL obtained using JSON data

Please note: I don't have a background in programming. I'm making an effort to learn as much as possible. As I was reading (and later experimenting with) the solution to this query, it dawned on me that having the same information in JSON form ...

Dynamically sending data to child components in Vue.js

I'm currently working on a progress bar implementation where the progress status is determined by the submitAction method. The value for the progress bar is constantly being updated in this method. Here's my code: 1. Parent Component <templa ...

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...