Exploring the features of AngularJS ui-router: ui-sref functionality and utilizing custom

My HTML looks like this:

<span ui-sref="{{detailsArt(art.Id)}}" check-val></span>

Within my directive check-val, I have the following code:

link: function(scp, el, attr) {
  el.bind('click', function(event) {
    //some logic with if:
    event.preventDefault();
  });
}

However, it seems that this is not working with ui-sref.

Interestingly, when I use

$state.go('detailsArt', {artId: art.Id})
, the directive works as expected.

I am wondering if it is possible to make ui-sref work with a directive click handler. If so, how can I achieve this?

Answer №1

It is important to use the following syntax:

ui-sref="detailsArt({artId : art.Id})"
Additionally, you must include an anchor tag a as recommended by Pankaj

<a ui-sref="detailsArt({artId: art.Id})" check-val></a>

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

Get alerts from Twitter pushed to my site

Is it possible to create a web application that utilizes JavaScript to receive notifications from Twitter? I want my website app to send me notifications whenever a person I follow posts a new article. I'm having difficulty with this task and would gr ...

Vuejs - Expanding Panels

Trying to implement an accordion using Vue.js has been a bit challenging for me. While I came across some examples online, my requirements are slightly different. In order to maintain SEO compatibility, I need to use "is" and "inline-template", which make ...

The gauge created dynamically using the justgage plugin does not display the value

I am currently experimenting with dynamically adding gauges, and although they are displayed on the screen, the values being shown are incorrect. Even when the graph indicates a different value, it still displays 0. These gauges are triggered by an onclick ...

Disabling prefetch in next.config.js: A comprehensive guide on eliminating data prefetching in Next.js

Typically, in many cases, the disabling of prefetching is achieved by specifically setting a link to not preload. An example of this can be seen below: <Link href="/about" prefetch={false}> <a>About us</a> </Link> My go ...

Transforming JSON/XML into a hierarchical display

I've come across the following XML file: <Person attribute1="value1" attribute2="value2"> value3 <Address street="value4" city="value5">value6</Address> <Phone number="value7" type="value8">value9</Phone> </Pers ...

Storing a JavaScript variable into a JSON file to preserve data

Is it possible to save data from variables to a JSON file? var json_object = {"test":"Hello"} $.ajax({ url: "save.php", data: json_object, dataType: 'json', type: 'POST', success: ...

If the condition has a class name of condition, then display

Having performance issues due to slow data rendering with each tab using a partial view. The code snippet for each tab is as follows: <div class="tab-content" ng-controller="MyController"> <div id="tab-1" class="tab-pane fade active in " ng-i ...

Issues with Touch Events in Angular when using Google Maps

While using the Google Maps JavaScript API in an Angular application, I encountered a problem when trying to use touch gestures on a Windows 8.1 screen. Unlike on a regular desktop with a mouse where the pan/zoom features work fine, the maps did not respon ...

Issues with uploading files on iOS devices when using ReactJS

Encountering an issue with uploading photos on iPhone in a Reactjs app. The problem seems to be specific to iOS as the code works fine on Android and computer. Below are the codes for better debugging. "use client" import Link from "next/l ...

On-page refresh triggering HTTP 404 error in Vue3 routing situation

Issue Upon reloading a route, such as /installer, in Vue3.js, I encounter the following error: https://i.sstatic.net/UKxdk.png Code Snippet I am utilizing the Router with the setup below: const router = createRouter({ history: createWebHistory(proces ...

Style your Checkbox Button with the Checkbox component from Element Plus

Currently, I am utilizing Vue 3 along with the Element Plus library. My goal is to modify the hover, active, and select colors of the Checkbox Button that I have implemented. Unfortunately, my attempts to do so have not been successful. I essentially copie ...

Using Angular, I am passing a controller variable as a parameter to a custom filter in the HTML `ng-repeat`. This parameter will be populated within a function so that

At the moment, my setup includes a controller, a filter file, and some HTML. Currently, I am using ng-repeat in the HTML with custom filters that I have created based on the filter being used. For example: ng-repeat="p in persons = (person | toArray | fil ...

The attempt to access a Spring Boot webservice using AngularJS and the GET method resulted in a 500 status error, indicating that the operation

I have successfully developed a webservice using springboot and angularjs to download an excel file from the server to my local machine. The URL is being generated correctly, however, I am encountering a 500 error. Below is the code snippet: My Springboot ...

Changing a class and audio and storing it using browser's local storage

The challenge I am facing: I am currently working on a feature for my website that allows users to toggle the volume on/off and have that setting persist across different pages. Specifically, I want the user's volume preference to be saved when they n ...

Closing the Bootstrap navbar collapse by clicking anywhere outside of the menu area

Excuse my lack of experience, but I have a question. I am trying to make Bootstrap "navbar-collapse" close when clicking away or on one of the list items. I stumbled upon this code that seems to do the trick. $(document).on('click',function() { ...

Using the Javascript $.each method to iterate over elements

this.CurrentComponent.ExtendedProperties is a Dictionary<string, string> obtained from the .Net platform. However, when trying to access the values within this Dictionary on the client side using JavaScript, all objects associated with the property a ...

Sending Byte Arrays from Knockout.js to a Server Endpoint

I'm a newcomer to KnockoutJS and I'm really enjoying learning about it. However, despite my efforts, I haven't been able to find the information I need. I'm hoping the community can lend a hand! In my View, I am using data-binding on a ...

Generating a new division element with a unique identifier and subsequently making adjustments to it

Just starting out with HTML and JS here, so please excuse my lack of experience and not-so-great English. I have an ID on an HTML element that I want to add content to using a function. Additionally, I need to create another element (inside the first one) ...

changing the contents of an array within the current state

My current task involves updating a list of names in the state before sending it as props to another component. // code snippet omitted for brevity this.state = { // other states here playerName: { player1Name: 'Default Player 1 Name ...

What is the best way to save the output of an asynchronous (AJAX) function in a variable?

This isn't a repeat query. I'm seeking assistance in locating a technical solution that hasn't been covered in the post How do I return the response from an asynchronous call? If .then() doesn't resolve the Promise, how can I pinpoint ...