Why is the date loaded in the link function not binding to the newly created HTML in the directive?

How can I write a directive to handle repetitive code? In this example, I need to load data from attachmentUsageService and generate HTML. The service successfully loads the data in the first step, but the data is not bound to the created HTML element. See the directive code below:

  app.directive('mySharedScope', ["abp.services.app.attachmentUsage", function (attachmentUsageService) {
    return {
        restrict: 'AE',
        template: ' <button ng-click="open()">Test {{attachments.length}}</button><div>',
        scope: { },
        link: function ($scope, $element, $attrs) {

            var attachments = [];

            $scope.open = function () {

                var _objectType = 0;
                var _objectId = $attrs.objectId;

                if ($attrs.objectType == 'person')
                    _objectType = 1;
                if ($attrs.objectType == 'company')
                    _objectType = 2;

                abp.ui.setBusy(null,
                    attachmentUsageService.getObjectAttachments({ objectId: _objectId, objectType: _objectType, itemCount: 10 }).success(function (data) {
                        attachments= data.attachments;
                        alert(attachments.length);
                    }));
            };
        }
    };
}]);

Why is the button's text not showing "Test [number]" after clicking on it?

Answer №1

attachments is a local variable and is not accessible in your view. To make it available, change var attachments = [] to $scope.attachments = [].

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

How to successfully configure environment variables in Next.js and deploy them on Netlify

An issue arose after deploying my Next.js application to Netlify using Git. I utilize a .env.local file to store the backend route URL that is used across the entire app for fetch requests. However, post deployment, the process.env.NEXT_PUBLIC_BACKEND_ROUT ...

Implement styling based on user input - Transmit form data via PHP to designated email address

My form allows people to provide their details and share their current timetable. I then group them based on suitable times The PHP form currently prints either 'work' or 'free' into a table cell, based on user selection in the form, a ...

Implementing external JavaScript files such as Bootstrap and jQuery into a ReactJS application

Just diving into ReactJs, I've got static files like bootstrap.min.js, jquery.min.js, and more in my assets folder. Trying to incorporate them into my ReactJs App but running into issues. Added the code below to my index.html file, however it's ...

Storing an array of JSON objects in separate rows within an SQL database table

I need help with inserting data from an API post request into a MySQL table using Express JS. The JSON array contains multiple objects that I want to fill out the rows in the table, but I can't seem to get it right. Any assistance would be appreciated ...

No data is being recorded in the Firestore database

This component in nextjs is designed to write data to a firestore database after the user clicks a button. Unfortunately, Firebase seems to be having trouble writing the data, even though the alert message following the supposed data dump is successful. I ...

The Precision of the IRR (Internal Rate of Return) Calculation in Javascript

I've been working on a custom IRR function in JavaScript to mimic the functionality of Excel's IRR function. Despite my best efforts, it seems that my results are slightly off. Below is the code snippet that I have been using: var IRRval = []; ...

Tips for initializing a jstree with no content?

When I click a button, I send a key to the controller and retrieve my lists using JSON. The array inside my lists serves as my children in my jstree. $("#btnSearch").on("click", function () { alert("I'm also here"); $.ajax({ ...

The issues with VUE3 compounding filters are causing unexpected results

Currently, I am attempting to filter search results using multiple filter options. After trying various methods, I have found that when applying only 2 filters, the search works as expected. However, when adding 3 or more filters, it includes additional re ...

Numerous Google Gauges featuring varying sets of options

Currently, I am facing a challenge involving the insertion of multiple instances of Google Gauges (or Highchart Gauges) on a single page. The goal is to utilize different option sets and separate their placement accordingly. Unfortunately, the solution pro ...

Is there a way to access specific methods within a JavaScript file?

Within my javascript assets folder, I have a file named jstester.js that looks like this: function hehe() { alert("wedsdsd"); } document.write("fdygsdfysdgf"); Then in the main index.html file in the public directory, I include the following code: & ...

Using two different Readable streams to pipe to the same Writable stream multiple times

In my current project, I am facing the challenge of concatenating a string and a Readable stream. The Readable stream is linked to a file that may contain data in multiple chunks, making it quite large. My objective is to combine these two entities into on ...

Combining Multiple NodeLists in Javascript

Initially, I was seeking a sophisticated method to replicate the functionality of Array.concat() on the results of the getElementsByTagName function in older browsers like IE because it appeared that concat wasn't supported. However, as it turns out, ...

How can I assign the ng-model value from an ng-repeat input in AngularJS?

I am facing an issue with allowing customers to edit a list of items using ngRepeat and ngModel. However, I am struggling to populate the input fields with the response. Here is the code snippet: <form name="customerupdateForm" ng-submit="EditCustomerS ...

Managing memory in UIWebView when rendering THREE.js scenes

I am currently working on a game using THREE.js that will be embedded into a UIWebView within an iOS8 app. After analyzing the application in Chrome's developer tools, I have confirmed that there are no memory leaks present. The memory usage reaches ...

When async/await is employed, the execution does not follow a specific order

I'm curious about the execution of async/await in JavaScript. Here are some example codes: async function firstMethod(){ new Promise((resolve, reject)) => { setTimeout(() => { resolve("test1"); }, 3000); }); } async ...

AngularJS functionality is only activated when using the ng-app directive with an empty value

I am facing an issue with my HTML page - it works fine when ng-app="" but not when ng-app="MyApp". How can I modify this page to work with ng-app="MyApp"? This code on the page allows for text input that is then displayed as the user types into the textbo ...

Look for and choose various fields from a lengthy JSON object

I am working with a JSON object that contains a large list of offerValue objects. { "Code": 0, "response": "SUCCESS", "offerValue": [ { "id": "111", "name": "ABC", "flag": "V" }, { ...

Utilizing the Current URL from the address bar as a variable to link within the same page

My goal is to: Extract the current URL address from the browser bar, which will have a format like this: http://example.com/test/index.html?&dv1=1023faf2ee37cbbfa441eca0e1a36c Retrieve the lengthy ID number located at the end of the URL 1023faf2ee37c ...

Why do we need to use [`expression`] notation?

I've recently started exploring reactjs and I came across this code snippet: handleChange = event => { const { name, value } = event.target this.setState({ [name]: value, }) } I'm a bit puzzled about the notation used here: [name ...

Customize your Angular UI Bootstrap Datepicker with unique buttons - here's how!

Currently, I have a datepicker with clear and close buttons. I tried using the append function to add more buttons to this datepicker, but it didn't work because the content is not loaded until we click the icon since it's a popup datepicker. Is ...