Comprehend the angular and in a confined scope and its brackets

I have been wondering why I have to use double brackets ()() when passing a method from an outer scope to a directive with an isolated scope using '&'.

It seems like the function is returned with callThat() and then I need to call it with another ().

The first function looks something like this:

function (b){return t(a,b)}

Here is some HTML:

<div class="jumbotron">
  <div class="row" ng-controller='myController'>
    <my-directive call-that="myPassedMethod"></my-directive>
  </div>
</div>

This is my controller:

app.controller('myController', function($scope){
  $scope.myPassedMethod = function(){
    console.log('War, war never changes');
  }
});

And here is my directive:

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      callThat : '&'
    },
    templateUrl: 'something_irrelevant.html',
    controller: function ($scope) {
      $scope.calledFromIrrelevantTemplate = function () {
        $scope.callThat()(); // why do I need to use ()(); here?
      };

    }
  }
});

Can anyone explain this concept to me? (I'm not an experienced JS developer, so please use simple language).

Answer №1

The reason for requiring the double function call is due to how you pass your function in this manner:

<my-directive call-that="myPassedMethod"></my-directive>

To correct it, modify it to:

<my-directive call-that="myPassedMethod()"></my-directive>

View Demo Here: http://plnkr.co/edit/xJnEEAGfrBXl5NXIIrZs?p=preview

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

Implementing CORS in ReactJs: A Step-by-Step Guide

When working with React.js, I often use this fetchData config: fetchData = () => { fetch("http://localhost:8000/batch_predict", { method: "POST", headers: { 'Accept': 'application/json, text/plain, */*&apo ...

Building Next.js with a designated maximum number of processes/threads

I've uploaded a fresh Next.js app to the cloud server using npx create-next-app. However, when I try to run the build script, the server throws an error 'pthread-create: Resource temporarily unavailable'. { "name": "next&quo ...

Incorporate CSS styling from a separate .css file into a material component

Just starting out with material UI. I have a css file that looks like this: .bgItem { font-size: 14px; } My component setup is as follows: <MenuItem key={status.Id} value={status.Value} classes={css.bgItem}> {status.Description} </Men ...

Requirements for adding information to a database table

I'm new to JavaScript and facing an issue that I need help with. I am trying to insert data into a database table based on certain conditions in my code, but even though I receive an error message when I input incorrect values, the data still gets ins ...

Implementing ES6 Angular directives with two-way isolated binding

I'm really struggling to understand how isolating scopes function in my code. Interestingly, everything seems to work fine when I remove the scope part of the directive. Can someone please shed some light on what I might be overlooking? export func ...

Tips for efficiently saving data using await in Mongoose

Currently, the code above is functional, but I am interested in utilizing only async/await for better readability. So, my query is: How can I convert cat.save().then(() => console.log('Saved in db')); to utilize await instead? The purpose of ...

Transfer data between an HTML page and a PHP page hosted on separate locations using jQuery

Below is the code snippet I am currently working on: function send_data() { var a=$("#username").val(); var b=$("#password").val(); $.post("http://localhost/login/login.php", {uname: a, pswd: b}, function(data) { $("#result").html(data); }); ...

converting an angular object into a string representation

I stumbled upon this guide: . and it includes the following piece of code: import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl ...

This function provides a service and does not return any value

When calling my service function, I am storing a boolean value in a variable to determine if a user is an admin or not. However, even though I receive the result (true or false), when assigning it to the variable vm.isAdmin, it shows up as undefined. vm ...

Troubleshooting: Issues with locating CSS and JS files (404 error) while utilizing URL parameters within Django platform

I've designed a dashboard page that showcases various graphs. The page automatically updates the graph data every hour. You can access the page at the following URL: http://localhost/dashboard I'd like to give users the option to specify the ...

Show only upon initial entry: > if( ! localStorage.getItem( "runOnce" ) ) { activate anchor link

My JavaScript form performs calculations, but I only want it to display the first time a visitor enters the site. I attempted to add the following code before my script: jQuery(document).ready(function($) { if( ! localStorage.getItem( "runOnce" ) ) { ...

Error: The javascript function is unable to execute because undefined is not recognized as a function

I've been struggling with an error in my "bubble sort" function that I wrote to organize a list of images. Whenever I run the function, I keep getting the message "Uncaught TypeError: undefined is not a function". Can anyone provide some guidance? $j ...

Unable to create the complete PDF file using html-pdf in a NodeJS environment

When trying to create a PDF from an HTML template, I am encountering some difficulties. While it works with static entries, I want to generate the PDF for multiple items that can vary each time. I feel like I might be overlooking something, so any suggesti ...

When attempting to remove an object from an array in Vue.js, an error may occur stating that the property of the

In my project, I am working with 3 files: App, BlogList, BlogItem. The goal is to enable users to delete a post if they choose to. However, when using splice method, I encountered the following error: The property or method "removePost" is not defined o ...

Extracting Ajax responses and storing them as variables in JavaScript

Currently, I am developing a small PHP script and using the following code for an ajax query: var CODE = $('.code').val(); var CASE = $('.code').attr('case'); $.ajax({ type:'POST', ...

Just built a React App including a blog functionality, but for some reason the blog posts are not showing up. Any suggestions on how to fix this issue

I'm currently working on a project that involves creating a blog page for our react app. Despite my efforts, I am facing difficulty in getting the blog posts to show up. In order to retrieve all the posts from my MYSQL database, I have set up an API ...

Having trouble making a call to my RESTful service from an AngularJS application using $http

I am having trouble with reading JSON data from a REST webservice using AngularJS $http. I have a simple REST webservice located in a separate project which returns JSON. However, when I attempt to access the REST service from Angular, it results in an err ...

Show only specific items in an AngularJS application

As a newcomer to AngularJS and the Ionic framework, I'm currently working with the basic Starter Tabs Ionic template. I would like to implement a "Favourite/Bookmark" feature for certain items and display them on a separate tab. The structure of my b ...

Loading JavaScript variable with pre-processed JavaScript information

I have been working on loading test data into a javascript object and then passing it to my heating timers. While I have managed to make it work by individually inserting the code into each timer, I am looking to optimize my code and enhance my understandi ...

Required Field Validation - Ensuring a Field is Mandatory Based on Property Length Exceeding 0

When dealing with a form that includes lists of countries and provinces, there are specific rules to follow: The country field/select must be filled out (required). If a user selects a country that has provinces, an API call will fetch the list of provinc ...