Determining the parameter type for the directive

How can you specify the types of parameters for the directive in AngularJS? Which type should be used for & binding?

Refer to ngdoc or jsdoc for an example code.

UPDATE: I am looking for answers to the following questions

 * @param {<< What should be included here? >>} parentContextExpression
 * @param {<< What should be added here? >>} oneWayParameter

angular.module('app', [])
  .directive('exampleDir', exampleDir);

/**
 * @ngdoc directive
 * @module app
 * @name app.directive:exampleDir
 * @param {<< What should be included here? >>} parentContextExpression
 * @param {<< What should be added here? >>} oneWayParameter
 * @param {Object=} twoWayParameter
 * @usage
 * <example-dir
 *   parent-context-expression="externalFn()"
 *   one-way-parameter="parentScopeVariable"
 *   two-way-parameter="parentScopeObject"
 * ></example-dir>
 **/
function exampleDir() {
  return {
    template: '...',
    scope: {
      parentContextExpression: '&',
      oneWayParameter: '@',
      twoWayParameter: '='
    }
  }
}

Answer №1

By looking at the Angular Material code, you can uncover the origins of this response.

Below is a simplified version that mirrors the structure in the original question.

/**
 * @ngdoc directive
 * @name exampleDir
 *
 * @param {string} one-way-parameter A One way.
 * @param {expression=} parent-context-expression An Expression
 */
function ExampleDir() {
  return {
    restrict: 'E',

    scope: {
      oneWayParameter: '@?oneWayParameter',
      parentContextExpression: '=?parentContextExpression'
    },
}

Based on my experience with the Closure Compiler (distinct from JSDoc and ngDoc):

The type of scope is {Object<string>}.

The values of scope parameters are not available until $onInit is triggered within the controller's class, hence they need to be nullable in the constructor. You could define these types as follows;

class SomeCtrl {
  constructor() {
    /** @type {?boolean} */
    this.oneWayParameter;
  }

  $onInit() {
    this.oneWayParameter = 'this is not a boolean';
  }
}

In this instance

this.oneWayParameter = 'this is not a boolean';
throws an error in Closure as the property anticipates a boolean but encounters a string instead.

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

The error message "Cannot read property 'properties' of undefined" is being thrown by the leaflet-search plugin

I attempted to implement the leaflet-search feature using a Vue-cli component. However, when I initiate a search, I encounter the following error message specifically related to the leaflet search function: Uncaught TypeError: Cannot read property &apo ...

Leveraging the power of Ajax and Javascript to handle and process conditional if/else statements

Hey there, I'm new around here so I hope I got this right. Currently, I'm diving into the Ajax for Dummies book after enjoying the PHP one years ago. However, I've hit a roadblock with my first real Ajax program. It took me ages to locate th ...

What causes the return of undefined when accessing an item from an object?

In order to extract the item "Errors" from the data object provided below: {Id: 15, Date: "22-02-2019", Time: "22:45", Sport: "Football", Country: "United Kingdom", …} Bet: "Win" Bookie: "Bet365" Competition: "Premier League" Country: "U ...

Tips for sending textarea data via AJAX with TinyMCE

Recently, I encountered an issue with submitting forms using the TinyMCE Jquery plugin. While regular input fields like text fields and select boxes submit just fine, there seems to be a glitch when it comes to submitting a textarea with TinyMCE. It requir ...

Tips for retrieving the value of a tag within a modal popup

I am trying to extract the value from an 'a' tag using the code below. <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" style="display: block;"> <div class="modal-d ...

Using single quotation marks within a string can cause issues in javascript

I am curious about how to handle single quote marks and other symbols within user-generated text without causing issues with the JavaScript code. Currently, if a user enters a title like "I wouldn't", it breaks the JavaScript functionality. <a cl ...

I am interested in modifying the hover effect for the text letters within the material UI container when hovering over it

this is the code I am currently working with: import React, { Component } from "react"; import MobileDetect from "mobile-detect"; import { map, orderBy, flowRight as compose, isEmpty, get } from "lodash"; import { Grid, Li ...

What is the process for integrating a custom script prior to building in a react application?

I am facing an issue with the Chart library that I am using and in order to resolve it, I need to execute a specific script. The script can be found at this link: https://github.com/plouc/nivo/blob/master/scripts/patch-react-spring.js. I have considered ad ...

When a user clicks on a React listItem, the information for that specific item is displayed using

As a beginner in the coding world, I am currently learning about React and JSON. My project involves working on three interconnected panels. Specifically, I aim to showcase checklist answers on the third panel. First Panel: Displaying: All the ESN ("46 ...

Transform the MUI Typescript Autocomplete component to output singular values of a specific property rather than a complete object

When utilizing MUI Autocomplete, the generic value specified in onChange / value is determined by the interface of the object set in the options property. For instance, consider an autocomplete with the following setup: <Autocomplete options={top ...

"Maximizing the slider with jCarousel: A guide to enhancing your carousel experience

I recently added jcarousel to my website and things are looking good so far. Take a peek at how my site is currently set up: check it out! What I'm aiming for now is a feature where if a user clicks on an image to enlarge, it will open in a new tab ...

Transforming HTML features into PHP scripts. (multiplying two selected values)

I am currently working on converting these JavaScript functions into PHP in order to display the correct results. I need guidance on how to use PHP to multiply the values of the NumA and NumB select options, and then show the discount in the discount input ...

Question about using React, NPM, Vite, Babel, and Node.js together

I want to confirm my understanding. So, if I decide to create a react 'app' and incorporate babel for jsx support. Then, I opt for vite for enhanced development runtime and packaging. Lastly, I utilize node.js to execute my code. To sum it up, ...

How can I ensure that my rendering only occurs after a full input has been entered? Implementing a delayed render() in ReactJS

Im working on a form that includes Controlled Component text inputs: <input type="text" onChange={(e) => this.props.changeBusiness(e)}/> I'm thinking of rendering the above text input in a separate component. It would be great if I could re ...

Using JQuery to cycle a class with a timer

My list has the following structure <div id="slider"> <ul> <li class='active'> a </li> <li> b </li> <li> c </li> <li> d </li> <li> e </li> </u ...

The error "req.user is not defined" occurs when accessing it from an Android

I am currently collaborating with an Android developer to create an android app. While my colleague handles the front-end development, I focus on the backend work. Specifically, I have implemented the login and authentication features using node.js, expres ...

JavaScript Arrays with Four Dimensions

Looking for a solution to generate arrays with any number of dimensions, including 4D arrays. I'm interested in being able to use the function to create an array and then access it like this: arr[3][2][23][12] = "amazing"; ...

The useSelector value remains undefined within the handleSubmit button in a React component

Once a user fills out and submits the form, the action is triggered to call the API. Upon returning the postId, it is stored in the reducer. The main React component then utilizes useSelector to retrieve the latest state for the postId. However, when attem ...

jQuery Datatables have trouble accessing specific row information when the table is set to be responsive

Currently, I'm utilizing the jQuery DataTables plugin along with the responsive addon to dynamically display and hide columns based on the size of the browser window. One of the columns is labeled as Actions, which permits users to edit a record by c ...

What is the method to remove the overlay from view?

Can anyone help with a small issue I'm having? When I click on button one, a modal popup appears but the overlay doesn't disappear when unloading. I've tried the code below, but can someone suggest what might be causing the problem? var po ...