Question

我开始编写指令，我很确定我掌握了为指令定义'isolate'范围的整个概念。

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

Answer 1

使用{{showNumber}}或在{span>之外移动{{number}}。

在span中，您只能访问指令范围属性（例如showNumber），因为为指令创建了隔离范围。

在范围之外，您可以访问控制器范围属性，例如number。

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

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

然后在指令中：

scope: {showNumber: '=model'},

AngularJS - 本地指令和父范围

1 个答案: