(function(ng, ddc) { ddc = ng.module('ddc', []); ddc.controller('DdcController', ['$scope', function($scope) { $scope.presenters = [ {name:'Anthony B.'}, {name:'Dave D.'}, {name:'Jon H.'}, {name:'Michael H.'}, {name:'Rob F.'} ]; $scope.foo = 'bar'; } ]); ddc.directive('ddcPresenter', function() { return { restrict: 'E', templateUrl: '/template.html', replace: true, scope: true }; }); ddc.directive('ddcFoo', function() { return { restrict: 'E', templateUrl: '/ddc-foo.html', replace: true, scope: true }; }); }(angular));
<div ng-app="ddc"> <div ng-controller="DdcController"> <div class="hd left">Controller Scope</div> <div class="hd right">Directive Scope</div> <div ng-repeat="p in presenters"> <div class="left">{{p.name}}</div> <ddc-presenter presenter="p" /> </div> <div> <div class="left">{{foo}}</div> <ddc-foo /> </div> <script type="text/ng-template" id="/template.html"> <div class="right"> {{p.name}} <input ng-model="p.name" /> </div> </script> <script type="text/ng-template" id="/ddc-foo.html"> <div class="right"> {{foo}} <input ng-model="foo" /> </div> </script> </div> </div>
.hd { font-weight: 800; font-size: 1.2em; } .left { display: inline-block; width: 200px; } .right { display: inline-block; width: 300px; } .right input { width: 100px; float: right; }