2

我开始编写指令,我很确定我掌握了为指令定义“隔离”范围的整个概念。

我的指令numberRoulette应该用随机数为提供的数字中的每个数字(或通过属性提供的数字数量fields="some-number-here")设置动画。每经过一秒,一个数字就会停止动画并设置为其预期的数字。有点像老虎机。。

<div ng-app="myApp">
  <div ng-controller="MasterCtrl">
    <span number-roulette fields="10" ng-model="number">
      {{number}}
    </span>
  </div>
</div>

我遇到的问题是,当我在指令范围和控制器使用的范围之间进行双向绑定时MasterCtrl,我的值停止显示。

app.directive('numberRoulette', function($timeout) {
  return {
    restrict: 'A',
    scope: {showNumber: '=ngModel'},
    ...
  };
});

function MasterCtrl($scope) {
  $scope.number = 1000;
}

JSFiddle:http: //jsfiddle.net/nguyening/aX6Zm/3/

4

1 回答 1

5

使用{{showNumber}}或移出{{number}}跨度。

在跨度内,您只能访问指令范围属性(例如,showNumber),因为为指令创建了一个隔离范围。

在跨度之外,您可以访问控制器范围属性,例如number.

更新:这里不需要 ng-model。任何属性都可以,例如:

<span number-roulette fields="10" model="number">

然后在指令中:

scope: {showNumber: '=model'},
于 2013-01-08T22:19:04.073 回答