I'm getting started with writing directives and I'm pretty sure I grasp the whole concept of defining an 'isolate' scope for a directive.
My directive numberRoulette is supposed to animate each digit (or a supplied number of digits through attribute fields="some-number-here") in a supplied number with random numbers. Every elapsed second, one digit stops animating and is set to its intended number. It 's a bit like a slot machine..
<div ng-app="myApp">
<div ng-controller="MasterCtrl">
<span number-roulette fields="10" ng-model="number">
{{number}}
</span>
</div>
</div>
The problem I'm running into is that when I make a two-way binding between the directive scope and a scope used by a controller MasterCtrl, my values stop displaying.
app.directive('numberRoulette', function($timeout) {
return {
restrict: 'A',
scope: {showNumber: '=ngModel'},
...
};
});
function MasterCtrl($scope) {
$scope.number = 1000;
}
JSFiddle: http://jsfiddle.net/nguyening/aX6Zm/3/
Use {{showNumber}} or move {{number}} outside the span.
Inside the span, you have access to the directive scope properties only (e.g., showNumber), because an isolate scope was created for the directive.
Outside the span, you have access to the controller scope properties, e.g., number.
Update: ng-model isn't required here. Any attribute will do, e.g.:
<span number-roulette fields="10" model="number">
Then in the directive:
scope: {showNumber: '=model'},