2

次の AngularJS HTML コードがあります。

<div ng-controller="myController">
    <div ng-grid="myGrid"></div>
</div>

ngGridは、ビューポート、一連の行、およびそれらの行内のセルから、構造化されたテーブルのようなコンポーネントを作成します。これらの項目にはそれぞれ独自のスコープがあります。さらに、それらのセルの 1 つに独自のディレクティブを作成しました。これは、新しい HTML5タグ<range>に似たディレクティブです。<input type="number">したがって、スコープ チェーンは次のようになります。

myController -> ngGrid -> ngViewport -> ngRow -> ngCell -> range

私がやろうとしているのは<input>、ディレクティブ内から の値を取得し、それを再利用可能な方法で<range>渡すことです(つまり、他のシナリオでディレクティブを再利用できるようにmyController明示的に呼び出すことはありません)。scope.$parent.$parent.$parent.$parent.$parent

この投稿の指示に従って、ディレクティブ コード内でコントローラーを要求しようとしましたが、役に立ちませんでした。このegghead.ioビデオの指示に従って式バインディングも試しましたが、まだ成功していません。ここから先に進む方法が本当にわかりません。

4

3 に答える 3

0

ここで親コントローラーの機能を利用できる理由は、ディレクティブのスコープ内で「アイテム」モデルを親の「アイテム」と同じに設定しているためです。したがって、range ディレクティブで myController の関数を使用できるようにするには、myController と range の間のスコープ レイヤー間でモデルを等しく設定する必要があります。

考えられる解決策の 1 つは、Angular の pubsub システムを使用することです。range ディレクティブに特定のイベント起動コードがあり、その値を myController でキャプチャする必要があることを知らせる場合 (たとえば、onBlur イベント)、単純に値をスコープ階層に出力し、myController でその出力されたイベントをリッスンします。値をキャプチャします。

rangeディレクティブからイベントを発行し、その値を渡します

scope.$emit("CAPTURE_VALUE", scope.inputModel);

myController でイベントをリッスンし、渡された値を取得します

$scope.$on("CAPTURE_VALUE", function(event, passedValue){
    $scope.rangeValue = passedValue;
};

range ディレクティブが myController の子スコープにある限り、入力値の深さに関係なく入力値を取得できるはずです。

于 2013-09-21T07:08:01.020 に答える
0

このような場合<input>(ng-model が最初のレベルであることに注意してください):

<input type="number" ng-model="value" />

レベル > 1 になるようにモデルを変更します。

<input type="number" ng-model="form.value" />
于 2013-09-20T19:44:01.267 に答える
0

親チェーンを呼び出す必要はありません。必要なのは scope.$parent だけです。スコープは通常、親スコープから継承するため、値型以外のものはすべて安全にアクセスおよび変更できます。スコープ継承の仕組みの詳細については、この回答を確認してください。

必要なコードはすべてここにあります。通信の例を 2 つの方法で実装しました。1 つ目は共通モデルの依存性注入を使用し、2 つ目は親スコープを参照します。

ワーキングプランカー

var app = angular.module('myApp', ['ngGrid']);

app.factory('rangeValues', function() {
    return [];
  });

app.controller('MyCtrl', function($scope, rangeValues) {
    $scope.factoryRangeValues = rangeValues;
    $scope.parentScopeRangeValues = [];
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                         {name: "Jacob", age: 27},
                         {name: "Nephi", age: 29},
                         {name: "Enos", age: 34}];
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: [{field: 'name', displayName: 'Name'},
                     {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div class="ngCellText"><div ng-range value="row.getProperty(col.field)">{{ value }}</div></div></div>'}]
        };
});

app.directive('ngRange', function(rangeValues) {
  return {
    restrict: 'EA',
    scope: {
      value: '='
    },
    link: function(scope, element, attrs) {
      // Pushing values to the injected model.
      rangeValues.push({
        value: scope.value
      });
      // Pushing values to the model on the parent scope
      scope.$parent.parentScopeRangeValues.push({
        value: scope.value
      })
    }
  }
});
于 2013-09-21T18:32:14.927 に答える