(function(ng, ddc) { ddc = ng.module('ddc', []); ddc.controller('DdcController', ['$scope', function($scope) { $scope.presenters = ['Anthony B.', 'Dave D.', 'Jon H.', 'Michael H.', 'Rob F.']; } ]); ddc.directive('ddcPresenter', function() { return { restrict: 'E', templateUrl: '/template.html', replace: true, scope: { presenter:'@' } }; }); }(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}}</div> <ddc-presenter presenter="{{p}}" /> </div> <script type="text/ng-template" id="/template.html"> <div class="right"> {{presenter}} <input ng-model="presenter" /> </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; }