Angular: Passing Object to Directive

http://angularjs.org/

by justinwyllie

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    
    <div ng-bind="obj.prop"></div>
    <hr>
   
    <div pass-object="obj"></div>
    <hr>
        
    <div pass-object2 test="obj"></div>
    <hr>   
        
    <div pass-object3 test="obj"></div>
    <hr>       
        
        
</div>

JavaScript

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

myApp.directive('passObject', function() {
    return {
        restrict: 'AE',
        scope: { passObject: '=' },
        template: '<div>{{passObject.prop}}</div>'
    };
});

myApp.directive('passObject2', function() {
    return {
        restrict: 'AE',
        scope: { passObject2: '=test' },
        template: '<div>{{passObject2.prop}}</div>'
    };
});

myApp.directive('passObject3', function() {
    return {
        restrict: 'AE',
        scope: { test: '=' },
        template: '<div>{{test.prop}}</div>'
    };
});




myApp.controller('MyCtrl', function ($scope) {
    $scope.obj = { prop: "hello world" };

});