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

Validation of forms using Javascript

Unable to turn off X-Powered-By: Express

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

What is the proper way to safely close the pg-promise connection in a node.js environment once all jest tests are completed?

Whenever I find myself being redirected to the login page, my goal is to eliminate the bottomTab from view

`Evaluating the functionalities of AngularJS using Protractor`

Concerns arise with jQuery grid compatibility in Firefox browsers

What steps should I take to ensure a local HTML page retains the current section that is hidden open whenever it is reloaded?

Steer clear of receiving null values from asynchronous requests running in the background

How do I create a notification when the div reaches 100% alignment on the left side using Javascript?

Accessing store in Vue, the getter function returns a value representing whether the user is currently logged

tips on launching a pre-existing react native project

The component fails to update even after changes are made to the Redux state

Unable to get the code for automatically refreshing a DIV every 5 seconds to function properly

Version 5 of Material UI has a bug where the Grid component does not properly stretch

Having difficulty adding a custom service to the run function in an AngularJS application

Using Google Apps Script to upload a text file to Google Drive

To show the image along with the .titleclass, .subtitleclass, and .description when clicking on it, what steps do I

Unable to modify the logo images in React

Adding a custom class to the body element for specific routes in Next.js can be achieved by utilizing the features of