AngularJS - 本地指令和父范围

Question

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

我的指令 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>

我遇到的问题是，当我在指令范围和 Controller MasterCtrl 使用的范围之间进行双向绑定(bind)时，我的值停止显示。

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

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

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

Answer 1

使用 {{showNumber}} 或将 {{number}} 移到范围之外。

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

在跨度之外，您可以访问 Controller 范围属性，例如，number。

更新:此处不需要 ng-model。任何属性都可以，例如:

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

然后在指令中:

scope: {showNumber: '=model'},