passing object to angularjs directive from the controller

Question

Trying to get my head around AngularJS directives. I need to pass a full object from my main controller to the directive. See the code below and jsfiddle: http://jsfiddle.net/graphicsxp/Z5MBf/4/

<body ng-app="myApp">
<div ng-controller="MandatCtrl">
    <div person myPerson="mandat.person"></div>

    <span>{{mandat.rum}}</span>
    <span>{{mandat.person.firstname}}</span>

</div>

and the script:

var myApp = angular.module("myApp", []);

myApp.controller("MandatCtrl", function ($scope) {
$scope.mandat = { rum: "15000", person: { id: 1408, firstname: "sam" } };
});

myApp.directive("person", function () {     
return {
    scope: {
        myPerson: "="
    },
    template: 'test: <div ng-model="myPerson"><input type="text" ng-model="firstname" /></div>'
}
});

Ok, the binding is working fine for mandat.rum and mandat.person.firstname.

However, I'm trying to pass mandat.person to the directive, and it does not work. I know I must be doing something wrong, the question is what ? :)

A general note: Please don't mix Swedish and English in your code. The syntax is in english, keep your code in english without mixing. It just makes it harder to understand, even though swedish is my native language. — Jonas Stensved
– Jonas Stensved, Commented Oct 13, 2015 at 8:10
I wish I spoke Swedish :p Where do you see any Swedish in my code ??? — Sam
– Sam, Commented Oct 13, 2015 at 11:46

Ajay Singh Beniwal · Accepted Answer · 2013-04-13 16:55:55Z

10

Pls see below working copy

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>

  <link rel="stylesheet" href="style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
      <span>{{mandat.rum}}</span>
      <span>{{mandat.person.firstname}}</span>
    <input type="text" ng-model="mandat.person.firstname" />
    <my-directive mandateperson="mandat.person" >

      </my-directive>
    <script type="text/javascript">
        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function ($scope) {
            $scope.mandat = { name: "John", surname: "Doe", person: { id: 1408, firstname: "sam" } };
        });


        app.directive('myDirective', function () {
            return {
                restrict: 'E',
                template: "<div><span>{{mandateperson.id}}<span><input type='text' ng-model='mandateperson.firstname' /></div>",
                replace: true,
                scope: { mandateperson: '=' }
                }
            }
        )
    </script>
</body>
</html>

answered Apr 13, 2013 at 16:55

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

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

8 Comments

Sam Over a year ago

cool, that works. But I can't see what's wrong with my code. Could you point me to what I was doing wrong ? You're not doing exactly the same way as you are using restrict: 'E' but that can't be the reason your code is working, or can it ?

jpmorin Over a year ago

I think it is because you must encapsulate your properties within an object. So instead of doing : <input type='text' ng-model='firstname' /> you must do <input type='text' ng-model='myPerson.firstname' />

Ajay Singh Beniwal Over a year ago

1) use myperson.firstname 2)replace camel case in attribute and scope just replace myperson with myPerson and it will work

Sam Over a year ago

Ah, got it. If I do myPerson in the scope, then the attribute should be my-person. I had forgotten about that... Still learning...

jds Over a year ago

@AjayBeniwal, some explanatory text would make this a much better answer.

|

Collectives™ on Stack Overflow

passing object to angularjs directive from the controller

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related