2016-10-06 6 views
0

私は問題が発生していますが、ここからどこに行くのかは分かりません。角度のないデータバインディングと親スコープ

私のコードでは、私はモジュールを持っていて、モジュールの外側にある命令はそれ自身ではありますが、注入されています。

親スコープにregistrantsというオブジェクトがあります。この指示文を読み込むと、その指示文のすべてのアクティビティが親スコープを変更し、registrantsが更新されます。しかし、私は別の変数registrantCountを持っていますが、これは登録者リストの長さが増えるにつれて更新されるはずですが、そうではありません。誰かがなぜ私に説明することができますか?

ここに、以下の関連するすべてのピースを含むコードのスニペットがあります。上の説明で言及していない変数がある場合、そのデータが正しいと仮定します完了。私が関心を持っている唯一の変数は、最初の問題の声明で述べた2つです。

angular.module('register.check', []) 
.directive('attendees', function($http){ 
    return { 
     restrict : 'EA', 
     scope : false, 
     templateUrl : 'template', 
     link : function(scope, elem, attrs){ 
      angular.forEach(companies, function(c, key){ 
       if(c.companyID == id){ 
        scope.registrants = c.registrants; // this object is modified in the directive template 
        scope.registrantCount = scope.registrants.length; // this variable is located in the parent template, not the directive template 
       } 
      }); 
     }) 
    }; 
}); 

モジュール

angular.module('register', []) 
.controller('Register', function($scope, $rootScope, $http){ 
    $scope.registrants = {}; 
    $scope.registrantCount = 0; 

    $http({ 
     url : 'apiLink for initial data' 
    }).then(function(data){ 
     $scope.employeeList = data.data.payload[0]; // initial list to allow the directive to function 
    }); 
}); 

ディレクティブは再びディレクティブは、登録者の親スコープのオブジェクトを変更しますが、それは登録者数は変更されません、またそれがされますのでご注意ください親変数の中で正しい長さを生成します。私はこの問題について非常に混乱しています。早めにすべての助けをありがとう!

+0

ディレクティブを実装するHTMLを投稿できますか? – opticon

+0

@ mark-hillでは、 'registrantts'とは異なり、' registrantCount'はリテラルバインディング(つまり 'number'型)なので、ディレクティブ内の更新が期待どおりに表示されないことがあります。カウントを別のオブジェクトの中に投げ込み、それが問題の可能性があることを確認するためにそれを更新してください。 – miqid

答えて

1

は何が起こっているのより詳細な説明のためのthis postを見てみましょうが、要するに:

角度で結合すると、一種の注意が必要です。 $scope.registrantsはオブジェクトなので、子スコープ(あなたのディレクティブ)は直接それを参照します。つまり、同じオブジェクトを指しています。 $scope.registrantsCountは整数です(プリミティブ型とみなされるため)、ディレクティブは別の変数を作成し、双方向バインディングが壊れます。

つのオプション:miqidが提案されているようですか、とregistrantsCountを含むオブジェクトを作成します。

$scope.registrantsCount = { count: 0 } 

とthuslyあなたのディレクティブでそれを更新:

scope.registrantsCount.count = scope.registrants.length; 

...またはあなたの中で関数を作成コントローラーを呼び出して、あなたの指示に従ってください:

// in controller 
$scope.registrantsCount = 0; 
$scope.updateRegistrantsCount = function(count) { 
    $scope.registrantsCount = count; 
} 
// in directive 
scope.updateRegistrantsCount(c.registrants.length); 

私は後者が好きです。

関連する問題