2

私はディレクティブを書き始めています。ディレクティブの「分離」スコープを定義するという概念全体を理解していると確信しています。

私のディレクティブは、乱数を使用して、指定されたnumberRoulette数値の各桁 (または attribute を介して指定された桁数) をアニメーション化することになっています。fields="some-number-here"1 秒経過するごとに 1 桁のアニメーションが停止し、意図した数値に設定されます。スロットマシンのようなものです..

<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 に答える