Is there a way for me to retrieve the ngModel of an input element from a higher-level Directive in AngularJS?

This is a sample view I am working with:

  <div my-directive="somevalue">
    <input name="myField" ng-model="dataForMyField">
  </div>

Below is the code for my custom directive:

app.directive('myDirective', function ($compile) {
  return {
    restrict: 'A',
    template: `<div ng-transclude=""></div>
            <div>SomeValue from directive <strong>{{ someReturnedValue }}</strong></div>`,
    transclude: true,
    controller: function($scope, $element, $attrs, $transclude) {

        $scope.someReturnedValue = 'ValueFromDirective';
        console.log('Name of input'); // myField
        $scope.$watch('vm.ngModel', function(newValue, oldValue, scope) {
          console.log('WOW! Input.ngModel changed', newValue); // world in the init
        });

    }
  }
})

I am trying to figure out how to access the ngModel of the input field.

Feel free to check out this Plunker example associated with this question.

Answer №1

Give this a shot

<div my-directive="anotherValue">
    <input name="myInputField" ng-model="valueForMyInputField">
</div>


app.directive('myDirective', function () {
  return {
  scope: {
      valueForMyInputField: '@dataAttribute'
    },
    restrict: 'A',
    template: `<div ng-transclude=""></div>
            <div>Different Value from directive <strong>{{ returnedValue }}</strong></div>`,
    transclude: true,
    controller: function($scope, $element, $attrs, $transclude) {

        $scope.returnedValue = 'OutputFromDirective';
        console.log('Name of input field'); // myInputField
    }
  }
})

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

Is there a way to showcase information contained within a subarray?

Can you assist me in retrieving data from a subarray? I am unsure how to go about it. Below is my code for your examination. Here's the code from app.component.html: <table class="table"> <thead> <tr> <th scope="col" ...

The binding of values entered through a touch event is unsuccessful with ng-model

In my Angular app, I have integrated a JQuery + Bootstrap keyboard that is designed exclusively for touch input. If I try to use the mouse to click on the keys, the keyboard closes without registering any keystrokes, as it is programmed to close on click e ...

Encountered an error while subscribing in Angular-cli version 13.3.7: The data is undefined

I am trying to retrieve an array from my [Firebase] Realtime Database Here is the code snippet I have written: add-student.component.ts import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from ' ...

Exploring the world of command line testing with Angular2, Typescript, Karma, and Jasmine

If you're looking to run unit tests for Angular2 using Jasmine from the command line with Karma, you might have encountered some challenges. Various configurations have been tried, but none seem to work seamlessly when combining Angular2, SystemJs, Ty ...

Passing events between sibling components in Angular 2Incorporating event emission in

Having some trouble emitting an event from one component to another sibling component. I've attempted using @Output, but it seems to only emit the event to the parent component. Any suggestions? ...

The CSS text in AngularJS/Bootstrap 3 surpasses the background image

Here in the ng-view section, utilizing the power of Angular, the text seems to be overflowing the background image. Is there a way I can adjust the size of the background image, please? https://i.sstatic.net/nUovt.jpg <div class="col-xs-12 c ...

Error: TypeScript compilation failed due to absence of tsc command in the system

Hello, I recently installed TypeScript and encountered an issue when trying to initialize tsc -v in the terminal. The error message I received was "bash: tsc: command not found." During the installation process, I used npm install -g typescript@latest whi ...

AngularJS and the challenge of working with Google API's across different domains

I have been using the code below to obtain location details from the Google API. This is my code: if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position){ $scope.$apply(function(){ $http.get('http: ...

Seeking the Origin of NgxMqttServiceConfig Import: Dealing with NullInjectorError in Angular Testing

While working on an application using Angular 8 and ngx-mqtt, I encountered an error when running the tests defined in the .spec.ts files. The error message reads: NullInjectorError: StaticInjectorError(DynamicTestModule)[InjectionToken NgxMqttServ ...

Transferring information from a service to an AngularJS controller

I have a service that retrieves data from a URL provided as a parameter, and it is functioning correctly. However, when attempting to pass this data to a controller's $scope in AngularJS, I am not receiving any data. var app = angular.module("Recib ...

Two-way conditional type mapping

Currently, I am working on mapping the various "data types" of an object to a corresponding "schema" type. If the property's data type is boolean, it should be mapped to the "BooleanComponents" type The code snippet below demonstrates how this can ...

Configuring the React Typescript router to support username-based URLs should be done in a way that does not cause conflicts with other routes

I am looking to display a user's profile on a URL format such as www.domain.com/<userName> and load the component ShowProfile. I want to ensure that terms is not mistaken for a username, so if I visit www.domain.com/terms, I do not want to load ...

What could be causing the headings and lists to not function properly in tiptap?

I'm currently working on developing a custom text editor using tiptap, but I've encountered an issue with the headings and lists functionalities not working as expected. View the output here 'use client'; import Heading from '@tip ...

Incorporating the Chartist plugin into an Angular 5 application

Currently, I am facing an issue while attempting to create a project in Angular 5 that involves utilizing chartist @types and js files of chartist plugins. Interestingly, the files compile without any issues in Angular 4, but encounter difficulties when t ...

What is the best way to combine the attributes of multiple objects within a union type?

I have a clearly defined schema type Schema = { a: { a: 1 } b: { b: 2 } } I am in need of a function that can generate objects that adhere to multiple schemas. function createObject<K extends keyof Schema>(schema: Array<K>, obj: Sche ...

List in Angular remains empty

I am facing an issue with populating a simple HTML list using Angular. The problem arises when trying to display the data in the list. When I use console.log("getUserCollection() Data: ", data);, it shows an array which is fine, but console.log("getUser() ...

sophisticated authorization structure for sails.js and angular

Thinking about developing some applications using sails.js and angular.js I'm in search of a way to create adaptable permissions. I want the ability to control permissions for model operations (CRUD) and functions within models. Additionally, it shou ...

How to remove an element from a nested JSON array object using AngularJS

I am looking to remove a specific element from a nested json array. The JSON object provided has the root node named EE with nested child Nodes and Packages. My goal is to delete the node with id = 7. Is there a way to achieve this? $scope.data = { ...

Discovering users in an offline or online application through Spring MVC and AngularJS

There is a saying that goes, "If you can't explain it to a six-year-old, you really don't understand it yourself." Please help me make this possible now... I am searching for ideas or references on how to achieve this. https://i.sstatic.net/DM0lS ...

Error installing npm: Dependencies could not be loaded for installation

Currently, I am in the process of learning Angular JS by building a simple phonecat app. Following the steps, I have downloaded Node.js and attempted to execute the command: npm install An error has occurred: C:>npm install npm ERR! install Couldn&ap ...