Invoke the parent controller's function within the route

I'm currently utilizing ngRoute, and in my route controller I need to be able to call a function from the parent controller without using $scope. Here is a snippet of index.html:

<div class="col-lg-12" ng-controller="IndexController as index">

    <div ng-view>
    </div>

</div>

This is the parent controller:

(function(){
    'use strict';

    angular
        .module('project')
        .controller('IndexController', IndexController);

    function IndexController() {
        var vm = this;

        vm.hello = function() {
            console.log("Hello from parent controller");
        }
    }
})();

What's the best way for me to call the hello() function in the route controller?

Answer №1

To start, make sure to include an empty dependency array in your module declaration.

.module('website', [])

Next, you can call your function by adding a button element like this:

<div class="col-lg-12" ng-controller="AppController as app">

  <div ng-view>
    <button ng-click="app.greet()"></button>
  </div>

</div>

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

Issues arising when attempting to use JQuery in conjunction with Vuejs

Looking to integrate the JQuery plugin, owl carousel, into a list generated using Vuejs. HTML <h4>1. Vuejs rendered items with OWL Carousel (not working)</h4> <div id="user" class="owl-carousel"> <div class="item" v-for="user in ...

Is there a specific method to access a JSON file with (js/node.js)?

Searching for a way to access user information stored in a JSON file using the fs module in node.js. Specifically looking to read only one user at a time. app.get("/1", function(req, res) { fs.readFile("users.json",function(data, err){res.write(data)}} W ...

jQuery opacity transition not functioning properly while all other animations are working fine

I've encountered quite a peculiar issue: Using jQuery v11 on the latest version of Chrome localhost, I can successfully apply jQuery.animate() to various elements and features on my website, including opacity. However, there is one particular element ...

{Multi Drag-and-drop} Enhancing the User Experience: Implementing Individual Comboboxes for Each File Prior to Up

Utilizing the dropzone tool for uploading files to my server has been quite helpful. I am able to drag and drop multiple files, sending them successfully with a post request. For each uploaded file, I require specific information related to it. It would b ...

Is it possible to create a component with a button that triggers the rendering of a different component?

I am struggling to implement an 'edit' button within a component that, upon clicking, should display a separate component known as a 'client edit modal'. I'm facing challenges in figuring out how to achieve this functionality. The ...

I am encountering an issue where the msal-browser login process seems to be frozen at the callback

After successfully installing the msal-browser package, I am able to log in. However, I encounter an issue where the screen gets stuck at the callback URL with a code. The samples provided in the GitHub repository demonstrate returning an access token in ...

How can the button effect be disabled in Vue Material for md-button?

Is there any documentation available for disabling the effect from md-button in Vue Material? Thank you ...

Steps for handling errors in Node.js when the query result rowCount is 0 and throwing an error in response

If the rowcount is 0, I need to send a response as failed. If the rowcount is 1, I need to send a success status. Can someone please assist me with this? When I try to print (client.query), it displays the result in JSON format (refer to attached image). ...

Avoid Refreshing the Page When Pressing the Like Button

I've been working on code for liking a post and saving the value to a database using server-side code. However, I'm running into some issues when the page refreshes after clicking the like button. I tried using event.preventDefault() in my JavaSc ...

A comprehensive guide on effectively monitoring Form Abandonment in Google Analytics using jQuery or JavaScript

Is it possible to accurately track "Form Abandonment" in Google Analytics using jQuery or JavaScript? This method can help generate reports that display how far users progress through form filling before exiting or failing to submit. Are there more effect ...

Is there a way to use Javascript or JQuery to conceal all unchecked items in a RadioButtonList?

Currently, I am utilizing the Asp .net repeater to bind the selected value in the RadioButton list. Here is an example snippet: <asp:RadioButtonList ID="RadioButtonList1" runat="server" SelectedValue='<%# Eval("Numbers& ...

React is displaying [object Object] instead of the intended value on the webpage. What steps can be taken to resolve this issue?

I have attempted to retrieve data from an API and am currently working on displaying this data within a table cell inside a component. Instead of rendering the original data, React is displaying [object Object]. I tried using the join() method with commas ...

Leveraging symbols as object key type in TypeScript

I am attempting to create an object with a symbol as the key type, following MDN's guidance: A symbol value may be used as an identifier for object properties [...] However, when trying to use it as the key property type: type obj = { [key: s ...

Highlighting a row upon being clicked

How can I implement a feature in my HTML page that highlights a row when selected by changing the row color to #DFDFDF? If another row is selected, I would like the previously selected row to return to its original color and the newly selected row to be h ...

Custom close functionality for AngularJS lightbox implemented in controller

I'm looking to create a customized close controller that will not only close the lightbox when I click "OK" in the alert, but I am unsure of how to do it. Here is the link for reference: Lightbox ...

Executing a Vue method from the main.js file within a Vue.js document

Why can't I call my method in App.vue? Shouldn't the div with id='App' in the App file allow me to access methods within it? Main.js new Vue({ render: h => h(App), methods:{ gesamt:function () { return 'Hello&a ...

Changing $scope does not automatically refresh the selected option when using ng-options with <select> in AngularJS

My select element is structured like this: <select ng-model="exportParam" ng-options="item as item.lib for item in allExportParams | orderBy:'lib'" class="form-control"> </select> To save its state for later display, I sto ...

Retrieve a Play Scala variable in the $scope of an AngularJS application

After trying various methods recommended on StackOverflow, I am still struggling to retrieve a Play Scala variable within my Javascript $scope. The line of initialization in an HTML file is as follows: @(playVariable: String)(implicit request: play.api.mv ...

Changes made in the view of a VueJS application are not being reflected in Laravel when using

Embarking on my first journey with VueJS within a Laravel PHP framework has been quite the adventure. A new project is on the horizon, and I dove in headfirst by making various changes, such as adding new elements and altering titles. However, much to my d ...

Encountered an error while trying to import the module: Unable to locate module 'react-redux'

I keep encountering the following errors and I'm unsure of where I'm making a mistake. Any assistance would be greatly appreciated. I've made changes to my webpack configuration and updated the react-hot-webpack loader, but the errors persis ...