Incorporating Angular, Angular UI, and Typescript while using the "controller as" approach

I'm having trouble with the combination in the topic, there must be a minor mistake somewhere that's causing this issue.

Controller:

  class JobCtrl {

      job: Object;  

      public $inject = ['$log', '$resource', 'ApiDataEndpoint', '$stateParams'];  
      constructor(public $log, public $resource, public ApiDataEndpoint, public $stateParams ) {      
           var JobRes = $resource(ApiDataEndpoint.url+'job/:id', {});

           var jobCall = JobRes.get({ id: $stateParams.id},function(){
               this.job = jobCall;
           })
      }  
  }

The route is defined as follows:

.state('app.job', {
        url: '/jobs/:id',
        views: {
            'menuContent': {
                templateUrl: 'templates/job.html',
                controller: 'JobCtrl',
                controllerAs: 'vm'
            }
        }
    })

In my view, I have the following:

<p>
 Name: {{vm.job.Name}}
</p>

However, the view does not update when the callback returns. It seems like there may be an asynchronous problem or a scope issue. While fetching the resource works perfectly, the view remains static. It appears that I am unable to set this job from within the callback. What could I be overlooking here?

Answer №1

One potential solution could be the following (not yet verified):

let callJob = JobRequest.get({ id: $stateParams.id}, function(result){
    jobDetails = result.data;
})

Answer №2

The current implementation does not make the data available within the callback function. By switching to a lambda function, you can achieve the desired result:

Instead of:

var jobCall = JobRes.get({ id: $stateParams.id},function(){
           this.job = jobCall;
       })

Use:

var jobCall = JobRes.get({ id: $stateParams.id}, (response) => {
           this.job = response.data;
       });

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

Illumination shining through the depths of three-dimensional shapes

I'm currently working on an HTML project that involves integrating ThreeJs. I have successfully created 4 spheres, with one emitting light and the other three forming a wall. However, I am facing an issue where the spheres behind the wall are still re ...

Comparing Angular2: The benefits of subscribing to Observables versus using singleton

Summary: Link to example What is the benefit of using a service's local variable instead of subscribing to an observable within the service? Illustrative Example: In the provided plunker, there are two components and a service. Both components sha ...

"Encountering issues with Firebase deployment related to function-builder and handle-builder while working with TypeScript

I encountered 4 errors while executing firebase deploy with firebase cloud functions. The errors are originating from files that I didn't modify. node_modules/firebase-functions/lib/function-builder.d.ts:64:136 - error TS2707: Generic type 'Req ...

HTML Option Absent from Blend VS2013

After recently installing VS2013 Pro in Office, I was excited to use Blend and its HTML Option. However, I am struggling to find a way to start an application with html as shown in videos. My goal was to utilize Blend for creating prototypes using html. D ...

What steps can be taken once the browser has completed all rendering processes?

I have a large form that functions on older PCs. This form is a component of a thin client system and is implemented using AngularJS to create a Single Page Application. One of the tabs on the SPA includes this form. Upon opening the form, requests are se ...

The Angular JS application is facing issues with building properly on Grunt Compile, although minification works perfectly on Grunt watch and build tasks

I am currently working on compiling my application that utilizes Angular JS (ngbp boilerplate). As a beginner in Angular and the SPA concept, I have encountered some challenges. The app is relatively simple and built with Grunt. The issue at hand is quite ...

Convert XML Element Values into HTML Elements

I have an XML structure that looks like this: <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <rss xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.0"> <channel> <title>title of the XML file</ ...

Stop node.js from automatically converting a nested object containing numeric keys into an array

Every time I send an object with a nested object containing keys that are numbers to my node.js server, the nested object gets converted into an array. Is there a way to prevent this from happening? Client: $.ajax({ url : `/cctool/report`, method ...

Adding the object's key to an array in JavaScript: A step-by-step guide

Among the objects in my possession are: robot { id skill currentWorkPlace } warehouse { aiStaff currentStatus boxes } I am tasked with creating a function that will add the id of a new worker to the aiStaff array and assign a reference to the ...

Performing asynchronous updates with AJAX in combination with ASP to display updated progress panels can be achieved

I am currently delving into the realm of AJAX alongside Classic ASP for the very first time. Within my AJAX script, I'm calling an ASP page (process.asp) that contains a simple loop iterating from 1 to 1000. This loop mimics an image processing task ...

The sequence of execution in the code is not as anticipated

JS <script type="application/javascript"> var app = angular.module("app", []); app.controller("AppCtrl", function ($scope, $http) { $scope.data = []; $http.get("{{ url_for('data') }}") ...

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

Sliding down with a delay using jQuery

I'm attempting to create a hidden div that slides down when a button is clicked and then waits for about five seconds before sliding back up. I've experimented with using delay(), but I'm unsure if I'm applying it correctly. Additionall ...

What is the reason behind event bubbling failing to function properly when CSS grid is utilized and elements are placed in the same cell

I am facing an issue with two grid children occupying the same cell and both having click event listeners. As per the concept of event bubbling, I expect both event listeners to be triggered when I click on the cell. const outer = document.getElementByI ...

The Lightgallery plugin is creating three duplicates of the slides

I am currently facing an issue with a gallery that loads images from an API and displays them using the lightgallery plugin. Upon implementing the lightbox in the correct location (view question here), I discovered that the plugin is generating three slid ...

What is the reason behind JavaScript subtracting the timezone offset for ISO dates when passed into the Date() function?

In my function, I handle different valid date strings to produce a JavaScript Date object. Most strings work as expected, however, when an ISO formatted date (YYYY/MM/DD) is provided, the user's timezone offset is deducted from the date. For example ...

Fixing the forwardRef issue with react-router-dom and material-ui

Despite implementing the forwardRef as recommended in various posts and Material-UI website examples, I am still encountering a warning in the console that has me puzzled. I am working on setting up a drawer with a list of items that are React Router link ...

What is the best way to implement a CSS transition for styles that are dynamically created by React?

I have a situation where I am using a button component that is styled based on a theme provided by a context: The code in Button.js looks like: () => { const theme = useContext(themeContext); // { primaryColor: "blue" } return <button className ...

Encountering a 'scheduler flush execution error' and an Uncaught TypeError due to VueJS and Axios integration

After carefully examining my code, I have pinpointed the cause of this error to the following line: treeNodes.value = documentStore.convertToTree((await axios.get('/File')).data); Initially, I receive a warning: Vue warn]: Unhandled error during ...

Utilizing the rewire module in Node.js to assign a JSON value

//filejson.json { "body": { "name":"abc" } } //mainFile.js var readJson = require("/filejson.json") var req=clone(readJson.body); I am looking for a way to dynamically change the value of the name in my JSON data without actually editing the .jso ...