Passing ngModel from controller to directive in AngularJS

Question

Passing ngModel from controller to directive in AngularJS

I'm currently working on a project that involves a controller with an attribute directive nested inside of it. This directive requires access to the ngModel of its parent controller.

For more context, feel free to check out this Plunkr.

Issue at Hand

Although the form seems to load properly, the console log within the directive is showing:

a.$…t.aa {$attr: Object, $$element: R[1], fieldValidator: "", boundModel: "person", ngModel: undefined}

Can anyone shed light on why the ngModel is coming up as undefined and why the boundModel is displaying 'person'? I've been staring at this for too long without any breakthrough...

javascript angularjs

Answer 1

Answer №1

give this a shot

app.directive('fieldValidator', [function(){
  return {
    restrict: 'A',
    scope: {
      boundModel: '='
    },
    controller: function($scope){

    },
    link: function ($scope, $elem, $attrs) {
      console.log($scope.boundModel);
    }
  }
}]);

as others have mentioned, make sure you have an ng-model set up when using this directive. boundModel: '=' is the same as boundModel: '=boundModel'

If you want to access boundModel, simply use $scope.boundModel and don't worry about what's shown in $attr; that might not be what you're looking for.

Answer 2

give this a shot

app.directive('fieldValidator', [function(){
  return {
    restrict: 'A',
    scope: {
      boundModel: '='
    },
    controller: function($scope){

    },
    link: function ($scope, $elem, $attrs) {
      console.log($scope.boundModel);
    }
  }
}]);

as others have mentioned, make sure you have an ng-model set up when using this directive. boundModel: '=' is the same as boundModel: '=boundModel'

If you want to access boundModel, simply use $scope.boundModel and don't worry about what's shown in $attr; that might not be what you're looking for.

Answer 3

Answer №2

{ data: '=model' } indicates that you transfer the data property via the model attribute. However, in a template, you will not find the model attribute. Instead, it is named data-model.

Answer 4

{ data: '=model' } indicates that you transfer the data property via the model attribute. However, in a template, you will not find the model attribute. Instead, it is named data-model.

Answer 5

Answer №3

scope: {
   boundModel: '=ngModel'
},

Your usage of scope variables is incorrect. By specifying '=ngModel', you are indicating that there is an attribute named 'ng-model' on the directive, which should be accessed as scope.boundModel within the directive.

It appears that you want to utilize the ng-model controller. In that case, why not simply use ng-model directly on your directive instead of creating a new variable like boundModel?

To achieve this, you can rename the bound-model in your HTML to ng-model and remove the scope from the directive. If you intend to utilize the ngModelController, you'll need to inject it within the directive's link function as shown below:

return {
    restrict: 'A',
    required: '^ngModel',
    scope: {},
    controller: function($scope){

    },
    link: function ($scope, $elem, $attrs, ngModel) {
      console.log($attrs);
    }
  }

By using the ngModelController, you can then manage validity and other aspects for the data bound to ng-model in the HTML, as outlined here.

Answer 6

scope: {
   boundModel: '=ngModel'
},

Your usage of scope variables is incorrect. By specifying '=ngModel', you are indicating that there is an attribute named 'ng-model' on the directive, which should be accessed as scope.boundModel within the directive.

It appears that you want to utilize the ng-model controller. In that case, why not simply use ng-model directly on your directive instead of creating a new variable like boundModel?

To achieve this, you can rename the bound-model in your HTML to ng-model and remove the scope from the directive. If you intend to utilize the ngModelController, you'll need to inject it within the directive's link function as shown below:

return {
    restrict: 'A',
    required: '^ngModel',
    scope: {},
    controller: function($scope){

    },
    link: function ($scope, $elem, $attrs, ngModel) {
      console.log($attrs);
    }
  }

By using the ngModelController, you can then manage validity and other aspects for the data bound to ng-model in the HTML, as outlined here.

Passing ngModel from controller to directive in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging ng-model to bind a variable retrieved from a service

What is the best way to toggle a d3 svg overlay using a leaflet layer control?

Executing an AJAX request with a specific state in Node.js

Issues with synchronizing Firebase and Node.js?

switching the image source by selecting different options from a dropdown menu and leveraging JavaScript

Ensuring Consistent Visual Harmony Across Linked Elements

Ways to show text in a password field

A Vue button that toggles between three states depending on the value in an array

Toggle the visibility of an element with a single button click

Is it possible to trigger an event for only one connected client instead of broadcasting it to all clients using socket.io?

Unable to cancel the RTK query request

Convert JSON response date format to a format specified by the user

Whenever a user navigates back to a specific page in Ionic by clicking the back button, make sure to set a variable to null

Update the color scheme of text labels and the title on a 3D bar graph created with amcharts

relocate the figcaption below the image on mobile devices

Exploring the integration of two-way binding with Angular and Polymer web components

Is it possible to utilize $save as $add in Firebase with Angular Fire?

Using EJS to Render a Function Expression?

Transitioning from one CSS id to another during page loading

The ng-repeat directive is specifically designed to loop through a List object, and does not support iterating over Iterable