0

I've got this form section (simplified for question):

<label>firstitem brand: </label><input ng-model="ctrl.object.item_attributes[0].brand">
<label>firstitem model: </label><input ng-model="ctrl.object.item_attributes[0].name">

<label>seconditem brand: </label><input ng-model="ctrl.object.item_attributes[1].brand">
<label>seconditem model: </label><input ng-model="ctrl.object.item_attributes[1].name">

And I would really like to instead do something like this:

<form-directive item="ctrl.object.item_attributes[0]"></form-directive>

<form-directive item="ctrl.object.item_attributes[1]"></form-directive>

As an Angular newbie, I'm stumped as to how to set the ng-model through my directive. I've tried passing it in directly through scope, and through the directive's link function, but with no luck. Any ideas?'

EDIT:

I tried the following directive per Steff's advice:

function fixIt () {
  return {
    restrict: 'EA',
    require: "ngModel",
       link: function (scope, elem, attrs, ngModel) {
           attrs.ngModel = scope.comp
// scope.com = object.item_attributes[i]

       }
  }
};

angular
  .module('app')
  .directive('fixIt', fixIt);

with my input formatted as such:

<input fix-it ng-model="">

And I get the following error: angular.self-7f8df3e….js?body=1:13921 Error: [ngModel:nonassign] Expression '' is non-assignable.

If I give ng-model an initial value in my input that error goes away but nothing I do inside the link function inside the fixIt directive sticks.

TDB
  • 367
  • 1
  • 3
  • 15

1 Answers1

0

If you want to set ng-model through your directive, you can consider the following method:

Directive code

(function(angular) {
    'use strict';
    angular.module('your_module_name',[]).directive('your_directive_name', function() {
    return {
        restrict: "EA",
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
        // accessing the ng-model value by using attr.ngModel
        }
    };
});
})(window.angular);

Remember to include your directive:

var myApp = angular.module('myapp', [ 'your_module_name']);

HTML code

<input your-directive-name ng-model="">

I use this method for my sparkling directive and it works just fine. For form validation and other input specific settings, you can take a look at this stackoverflow question: Angularjs: form validation and input directive

If there's any misunderstanding of your problem please let me know, and hope this helps you :).

EDIT:

I'm not sure why you left the ng-model empty and bind the $scope variable in your directive. Maybe trying

<div ng-repeat="item in ctrl.object.item_attributes">
    <input fix-it ng-model="item">
</div>
Community
  • 1
  • 1
Steff Yang
  • 98
  • 1
  • 9
  • Thanks for the help. I tried gaining access to the ngModel through the link function for both the form directive and input directive (like your solution) but no dice. Using your solution get an error message: angular.self-7f8df3e….js?body=1:13921 Error: [ngModel:nonassign] Expression '' is non-assignable. Element: http://errors.angularjs.org/1.5.8/ngModel/nonassign?p0=&p1=%3Cinput%20add-model%3D%22%22%20ng-model%3D%22%22lass%3D%22ng-pristine%20ng-untouched%20ng-valid%22%3E – TDB Aug 20 '16 at 02:36
  • Thanks. I went with the ng-repeat route after another hour of trying to dynamically set the ng-model. The only issue with the ng-repeat for me was that I was hoping to leave the length of object.item_attributes undefined in my parent controller. I ended up defining it at the max limit of what it could be, and now just have to make small tweaks elsewhere to deal with an object that could have empty indexes. – TDB Aug 20 '16 at 22:13
  • Feels great to help you :) – Steff Yang Aug 23 '16 at 15:46