Best IT Recipes

Passing an object to angularjs directive from the controller

Trying to understand the AngularJS directives. I need to pass the complete 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 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, binding works fine for mandat.rum and mandat.person.firstname.

However, I am trying to pass mandat.person into a directive and this will not work. I know that I have to do something wrong, the question is what? :)

+7
angularjs angularjs-directive
Apr 13 '13 at 16:31
source share
1 answer

See below a 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>
+8
Apr 13 '13 at 16:55
source share


More articles:


All Articles