Can we specify ng-include, ng-init, and ng-controller within the controller definition?

<div
    class="row caption-view"
    ng-include="'app/views/inventory/grid-view/part.html'"
    module="subscriber"
    alias="il"
    ng-controller="GridController as il"
    ng-init="il.setGridParams(cse.gridParams.findCation);
    cse.findCaptionGrid = il">
</div>

Within the 'cse' controller, I have included a view with its own controller using ng-include. Once everything has loaded, I can access and manipulate the 'GridController' by using 'cse.findCaptionGrid'.

However, there is an issue: The 'cse' controller is being loaded before I am able to interact with the 'GridController' (aka. 'cse.findCaptionGrid'). Even when attempting to use $timeout, the problem persists until a timeout delay of 5000 milliseconds is set.

My question is: Is it feasible to define the 'ng-init="il.setGridParams(cse.gridParams.findCation); cse.findCaptionGrid = il"' portion within the controller so that I can begin utilizing it immediately? Then in the HTML, I would simply indicate where this functionality should be displayed?

javascriptangularjs

Answer №1

Develop a custom directive :

<div my-custom-directive 
  class="row caption-view"
  module="subscriber"
  alias="il"/>


angular.module("yourApp").directive('myCustomDirective', [function(){
   return {
      controller: "GridController as il",
      templateUrl: "app/views/inventory/grid-view/part.html"
   };

}]);

and within your controller :

this.setGridParams(cse.gridParams.findCation);
cse.findCaptionGrid = this;

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

Removing all hand-drawn shapes on Google Maps

I am currently working on a project that involves using Fusion Tables, but I want to incorporate Event Listeners as well. To achieve this, I am utilizing JSONP technology. In the example provided below (in the fiddle link), you can see both the fusion tab ...

javascriptgoogle-mapsgoogle-maps-api-3

Tips for patiently waiting for a function that is filled with promises

Consider the following function: const getData = () => { foo() .then(result => { return result; }) .catch(error => { return error; }); }; Even though getData does not directly return a promise, it internally handles asynchro ...

javascriptnode.jspromise

What's the best way to separate and save data in a variable in JavaScript?

I need to split this code and store it in three different variables, like a=GD11, b=GDP7 and c=GD11, but I am having trouble because breaking at "s" results in "GDP7xGD11". Can someone please help me figure out how to break it into three separate variable ...

javascript

Error: Unable to access the 'CustomerId' property because it is undefined

Recently, I made some updates to my website. As part of the upgrade process, I switched to AngularJS v1.7.6 and JQuery v1.12.1. However, after making these changes, I encountered an error in my console log. TypeError: Cannot read property 'CustomerId ...

javascriptjqueryangularjs

When trying to access document.cookie, an empty string is returned despite the presence of cookies listed in developer tools, and the httpOnly flag is set

There are times when I encounter an empty string while trying to access document.cookie on the login page, despite the following conditions being met: The cookies are visible in the Chrome and Firefox developer tools, The httpOnly flag of the cookie I&ap ...

javascriptdjangoreactjscookieshttponly

Struggling to properly render JSON data

Having trouble accessing specific elements in a script that merges local JSON files using AJAX? The script works fine in Chrome Console, but you can't reach certain elements like 'object.country'. Any suggestions on how to tackle this issue? ...

javascriptjqueryjsonajax

Achieving a bookshelf model by combining data from several tables simultaneously

In the process of creating a node.js web service with the functionality of an auction, I am utilizing bookshelf.js for models and MySQL for the database. The database structure to consider is as follows: users: id | login | password | ...

javascriptmysqlnode.jsbookshelf.js

Execute operations on element itself rather than the output of document.getElementbyId

I encountered an issue involving an HTML element with the ID of BaseGridView. When I call a function directly on this element, everything works perfectly. However, if I use document.getElementById() to retrieve the element and then call the function, it do ...

javascripthtmldevexpress

What methods does a webpage use to track views and determine when content has been seen?

I am interested in learning about the code and mechanism that detects when a specific section of a webpage has been viewed (purely for educational purposes). For instance, on websites like StackExchange it tracks when someone has thoroughly read the "abou ...

javascriptcssajaxbrowserweb

Guide on generating virtual nodes from a string containing HTML tags using Vue 3

Investigation I stumbled upon this solution for converting a simple SVG with one path layer into Vue2 vnode list and wanted to adapt it for Vue3. After scouring resources, including the MDN docs, I couldn't find any pre-existing solutions. So, I dec ...

javascriptvue.jsvuetify.jshtml-parsing

Adjust the browser zoom level to default when navigating to a new page

My mobile site uses ajax to load pages, and I'm looking to implement a feature that resets the zoom level when a page changes. Is there an effective way to detect if a user has zoomed the view while browsing a page? Currently, I have been able to ch ...

javascriptmobile

Any tips on making Angular 8's sort table function seamlessly integrate with data retrieved from Firebase?

I am currently working on an angular PWA project that utilizes a material table to display data from Firebase. The data is being shown properly and the paginator is functioning as expected. However, I am facing an issue with sorting the data using mat-sort ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Error occurs when attempting to filter data through input text pasting in Angular

Currently, I am working on a web application that utilizes the Angular framework and angularfire2. The issue I am encountering is related to the data filter functionality not functioning correctly when pasting copied text. Interestingly, it works perfectly ...

javascriptangularangularfire2

Is there a way to generate a fresh Mongo collection inside an event handler in Meteor?

I'm currently exploring ways to dynamically add a new collection every time a button is clicked. Here's the HTML snippet I have: html: <template name="tempName"> <button class="submitButton">Submit</button> </template&g ...

javascriptmongodbmeteor

Vue.js has encountered a situation where the maximum call stack size has been exceeded

I have implemented a method called cartTotal that calculates the total price of my products along with any discounts applied, and I am trying to obtain the final value by subtracting the discount from the total. cartTotal() { var total = 0; var di ...

javascriptvue.js

Building a DOM element using jQuery

I have a function $(document).ready(function () { $("#btnhighlight").click(function () { var htext = $("#txthighlighttext").val(); $("#lstCodelist option").each(function () { var sp = $(this).text(); ...

javascriptjquerydom

How do I ensure a single row in my table constantly remains at the bottom?

I am currently working on developing a MUI table that shows rows, with the last row displaying the total number of colors. The challenge I am facing is ensuring that the last row always stays at the bottom when there are no results in the table. I have att ...

javascriptreactjsmaterial-ui

What is the reason in AngularJS for requiring directive attributes to be hyphen-separated while their scope variables are camelCased?

Here is an example in Html: <!-- Note 'display-when' is hyphenated --> <wait-cursor display-when="true"></wait-cursor> Then, when defining it in the directive: scope: { // Note 'displayWhen' is camelCased show: ...

javascriptangularjs

Combining arrays using the jQuery .each() function

I'm attempting to generate an array from several div id's. Check out my code below: $(function(){ $('#content > div[id^=post]').each(function(){ var ele = Number($(this).attr('id').substr(5,4)); var arr ...

javascriptjquerydom

Creating a custom Map type in TypeScript

I am exploring the concept of defining a Map type in Typescript using generics. Essentially, I want to create something similar to: EntityMap<U, V>, where U can only be either a string or a number This is what I have managed to come up with so far: ...

angularjstypescripttypescript-generics