AngularJS custom directive binding to model

Question

I am trying to build an object like:
{"age":"21","name":"foo", "address":["address1", "address2"]}

For address I am using a custom directive, I don't know how to attach this to scope (person.address). If I give ng-model="person.address" in directive, it is taking same address for both the input texts. I have to isolate scope, but don't know where to put it.

Fiddle: http://codepen.io/goutham2027/pen/EagPZG

HTML

   <div ng-controller="testCtrl">
     <form>
       Name: <input type="text", ng-model="person.name"> <br/>
       Age:  <input type="text", ng-model="person.age"> <br/>
       Address-1 <address> </address>
       Alternate-Address <address>  </address>
     </form>
     {{person}}
      </div>

JS

app.directive('address', function() {
  return {
    restrict: 'E',
    template: '<input type="text">'
  }
})

Edit: I found out how to do it. Fiddle: http://codepen.io/goutham2027/pen/LEjaXP

An isolated scope can help codepen.io/anon/pen/VYKeXv

Chandermani
– Chandermani

2014-12-23 13:47:26 +00:00
Commented Dec 23, 2014 at 13:47 — Chandermani
– Chandermani, Commented Dec 23, 2014 at 13:47

Rasalom · Accepted Answer · 2014-12-23 13:45:09Z

1

Just add an isolated scope to your directive:

app.directive('address', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '='
    },
    template: '<input ng-model="ngModel" type="text">'
  }
})

http://codepen.io/anon/pen/raMxJo

answered Dec 23, 2014 at 13:45

Rasalom

3,1113 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rchang · Accepted Answer · 2014-12-23 13:49:56Z

0

Try adding a person attribute to your controller.

app.controller('testCtrl', function($scope) {
  $scope.person = {age:"21",name:"foo", address:["address1", "address2"]};
});

As for using your custom directive to handle the two different address fields, go with the answer from @Rasalom.

edited Dec 23, 2014 at 13:49

answered Dec 23, 2014 at 13:43

rchang

5,2461 gold badge17 silver badges26 bronze badges

Comments

Dormouse · Accepted Answer · 2014-12-23 13:51:43Z

0

You should give the directive a private scope, like so:

scope: {
  model: '='
}

Then you'll be able to pass it to your directive:

<address model="address"></address>

In your directive the address is now available in the HTML template through the private scope.

answered Dec 23, 2014 at 13:51

Dormouse

1,6471 gold badge24 silver badges34 bronze badges

Comments

Artyom Pranovich · Accepted Answer · 2014-12-23 13:51:46Z

0

You can use isolated scope for that:

app.directive('address', function() {
  return {
    restrict: 'E',
    scope : {person:'='},
    template: '<input type="text" ng-model="person">'
  }
});

<div ng-controller="ctrl">
   <form>
     Name: <input type="text", ng-model="person.name">
     Age: <input type="text", ng-model="person.age"> <br/>
     Address-1: <address person="person.address1"> </address>
     Alternate-Address: <address person="person.address2"></address>
   </form>
</div>

CodePen example.

answered Dec 23, 2014 at 13:51

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

1 Comment

goutham2027 Over a year ago

i want address in array.

Collectives™ on Stack Overflow

AngularJS custom directive binding to model

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related