AngularJS directive is a powerful feature of the Angular

I am attempting to pass a variable from a controller to an attribute value in a directive. The specific directive I am utilizing can be found at this link. Below is an excerpt of my code:

  <div ng-controller="transactionsController">
              <table class="table" data-row-style="rowStyle">
                <thead>
                <tr>
                  <th>Link to Transaction</th>
                  <th>Amount Invested</th>
                  <th>Payout Amount</th>
                  <th>Transaction Status</th>
                  <th>Time</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="transaction in transactions">
                  <td><a href='https://blockchain.info/tx/{{transaction.input_transaction_hash}}'> {{transaction.input_transaction_hash}} </a></td>
                  <td> {{transaction.value/100000000}} </td>
                  <td> {{(transaction.value/100000000) * 1.2}} </td>  <!--TODO: Investment % shouldn't be hardcoded -->
                  <td class='red' ng-if="transaction.confirmations < 6 || transaction.confirmations == null">unconfirmed</td>
                  <td class='green' ng-if="transaction.confirmations >= 6">confirmed</td>
                  <!-- <td>{{transaction.date}}</td> -->
                  <td><timer end-time="{{transaction.date}}">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer><td>
                </tr>
              </tbody>
              </table>
            </div>
        </div>

The "transaction.date" variable originates from a separate controller and represents a date formatted as a String in milliseconds. For more examples of the directive, you can visit this page.

I seem to encounter an error when using "transaction.date" within the timer directive.

Answer №1

It seems like the primary issue lies in the communication between controllers.

This is a more structural problem that stems from how you choose to organize your application at its core.

A common approach for inter-controller communication is to centralize all data in a service or factory (refer to the Angular API documentation if you are unsure about what a service entails).

By storing all pertinent information in one entity (the service or factory), you can retrieve data from multiple origins. Then, in your controller, you simply inject the service as a parameter and instantiate it within the controller.

Another option worth considering is utilizing broadcast or emit functions (consult the Angular API) which disseminate data globally either upwards or downwards through the node tree. Your controllers can then access this data and utilize it, regardless of the source.

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

Exploring dynamic page linking with ui.router in Angular

In the process of developing a backend rails application that generates an API for consumption by a front end ionic app, I encountered an issue. Despite having experience with Angular, my familiarity with Ionic is limited. The specific problem lies in link ...

Is there a way to achieve a XNOR-like response with necessary input?

I'm currently working with a form that looks like this: <form> <input type="text" name="input1"> <input type="text" name="input2"> <button type="submit"> ...

Choose the list item below

I'm working on a website that includes a select list with images. Here's what I have so far: When I choose an image from the list, it should display below. <?php // Establish database connection $con=mysqli_connect("******","***","*** ...

Choose a random object from the array

I'm currently working on creating a function or an if condition that randomly selects one of three circles every second. The goal is to generate an animation where the circles move from the right side of the canvas to the left. Each second, a new cir ...

The jQuery change event is not triggered for <input type="file"> when a file is dropped on the label

I am currently developing a drag and drop file uploader that can be activated by either clicking the label or dragging a file onto the label. The input field includes a jQuery on change event that is triggered when a file is selected. However, it only see ...

How to Detect Font Resizing in Google Web Toolkit (GWT)

I am trying to find a way in GWT to capture the font resize event that occurs when the user changes the size of the font by using Ctrl-Mouse Scroll or going to View -> Zoom. I have searched on Google and looked on StackOverflow but haven't found an ...

Tips for sending a second parameter in a onSubmit function call in ReactJS

Below are the code snippets import React from "react"; var exampleComponent = React.createClass({ handleSubmit: function (e, text) { e.preventDefault(); console.log(text); }, render: function () { return ( ...

What is the best method to retrieve the country name from a world map using D3.js?

I'm trying to figure out how to retrieve the country name from a click event on the D3 world map. Despite inspecting the DOM, I can't quite understand how the country's name, code, or population is associated with the map. The template for ...

Displaying tab content in AngularJS from a dynamic array

I am currently working on my very first Angular SPA project. Within a form, I have implemented three tabs and would like each tab to display its content only when selected. The contents of the tabs are stored in an array within the controller. I have spent ...

Angular data binding with an object instead of an array list

Currently, I am implementing Angular and attempting to iterate through an object. Data in JSON format employee {"fName":"mike","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebb3b3b3b3b3b3b3b3ab83849f868a8287c588848 ...

Build a stopwatch that malfunctions and goes haywire

I am currently using a stopwatch that functions well, but I have encountered an issue with the timer. After 60 seconds, I need the timer to reset to zero seconds and advance to one minute. Similarly, for every 60 seconds that pass, the minutes should chang ...

Error in ng-repeat loop: detecting duplicates when none are present

$scope.subjects = [ "Computer Security", "Graphics and Multimedia", "Networks", "Computer Science and Engineering", "Game Design", "Programming", "Information Technology", "Software Engineering", "Technology Manageme ...

Place an IconButton component next to each Material UI TableRow

I am trying to include an icon next to the material UI table row component. Similar to the hint icon shown in the screenshot below Here is my attempt so far, but it's not functioning as expected: Check out the code on CodeSandbox https://i.stack.i ...

Asynchronous Return in NodeJS Class Methods

Currently, I am in the process of developing a JavaScript class that includes a login method. Here is an overview of my code: const EventEmitter = require('events'); const util = require('util'); const Settings = require('./config ...

Comparing Express.js View Engine to Manual Compilation

Currently, I am utilizing Express.js along with the hbs library to incorporate Handlebars templates in my application. Lately, I've delved into establishing a build system using gulp for my app and stumbled upon packages like gulp-handlebars. My query ...

Is it possible for multiple queries executed within a websql transaction to be run concurrently?

An informative tutorial online demonstrates the following transaction: db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")&ap ...

"The fascinating world of asynchronous JavaScript: Promises and Del

I've been diving into Promises, but I'm a bit confused by this code snippet. Can you help clear things up for me? const promise = new Promise((resolve, reject) => { console.log('Promise started') resolve('Success') }) ...

Unable to modify the value of data using the data() method

Just a basic HTML code snippet <div class="this" data-info="false"></div> $('.this').data('info'); This will correctly output: false $('.this').data('info', 'true'); data-info remains u ...

Encountering an illegal invocation error in jQuery

Recently delving into the world of jQuery, I am attempting to call a C# function from JavaScript using AJAX and jQuery. Additionally, I need to pass some parameters while making the call to the C# function. Here is how I am attempting to achieve this: var ...

Transferring a document to a koa-js server using formidable

Looking for some guidance with my attempted file upload process from my Ionic app to a Node.js server using koajs. I'm currently utilizing koa-body and formidable to parse the body. Below is the configuration on my server: this.app.use(formidable()) ...