passing object to angularjs directive from the controller

20,866

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>

20,866

Author by

Sam

Everything related to web development.

Updated on April 14, 2020

Comments

Sam about 4 years

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 ? :)

Sam about 11 years

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 about 11 years

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' />
Sam about 11 years

it doesn't seem to be that, I've tried both ways and none of them work for me.
Ajay Beniwal about 11 years

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

oh yeah I just figured it out ! So does this mean all scope objects have to be lower case ? that's annoying...
Sam about 11 years

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

@AjayBeniwal what if my data comes from api , value not defined in controller as yours? once after directive have finished loading . how to get update value reflect in directive
jds about 9 years

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