9

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
  • 13,934
  • 26
  • 108
  • 194
  • 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 Oct 13 '15 at 08:10
  • 4
    I wish I spoke Swedish :p Where do you see any Swedish in my code ??? – Sam Oct 13 '15 at 11:46

1 Answers1

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>
Ajay Beniwal
  • 18,857
  • 9
  • 81
  • 99
  • 1
    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 ? – Sam Apr 13 '13 at 17:28
  • I think it is because you must encapsulate your properties within an object. So instead of doing : you must do – jpmorin Apr 13 '13 at 17:31
  • it doesn't seem to be that, I've tried both ways and none of them work for me. – Sam Apr 13 '13 at 17:45
  • 1
    1) use myperson.firstname 2)replace camel case in attribute and scope just replace myperson with myPerson and it will work – Ajay Beniwal Apr 13 '13 at 17:49
  • oh yeah I just figured it out ! So does this mean all scope objects have to be lower case ? that's annoying... – Sam Apr 13 '13 at 17:52
  • 1
    Ah, got it. If I do myPerson in the scope, then the attribute should be my-person. I had forgotten about that... Still learning... – Sam Apr 13 '13 at 18:01
  • @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 – anam Dec 08 '14 at 08:45
  • 1
    @AjayBeniwal, some explanatory text would make this a much better answer. – jds May 08 '15 at 00:16