29

Angular初心者はこちら。オブジェクトをディレクティブに渡すときに何が問題になっているのかを理解しようとしています。

これが私の指示です：

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    scope: { walks: '=walkmap' },
    template: '<div id="map_canvas"></div>',
    link: function(scope, element, attrs)
    {
      console.log(scope);
      console.log(scope.walks);
    }
  };
});

これは、ディレクティブを呼び出すテンプレートです。

<div walkmap="store.walks"></div>

store.walksオブジェクトの配列です。

これを実行すると、スコープとして正常にscope.walksログに記録され、探しているすべてのデータを持つ子が作成されます。undefinedscopewalks

この正確な方法は以前に私のために働いていたので、私はここで何が間違っているのかわかりません。

編集：

必要なすべてのコードを使用してプランカーを作成しました： http：//plnkr.co/edit/uJCxrG

ご覧のとおり{{walks}}、スコープで使用可能ですが、未定義としてログに記録されているリンク関数でアクセスする必要があります。

4

5 に答える 5

40

を使用$resourceしてデータを取得しているため、データが使用可能になる前にディレクティブのリンク関数が実行されているため（からの結果$resourceは非同期であるため）、リンク関数の最初の時間はscope.walks空/未定義になります。ディレクティブテンプレートにはsが含まれているため、Angularはonを{{}}設定します。データを入力すると、トリガーと表示が更新されます。これは、コンソールにウォークデータが表示される理由も説明しています。リンクをクリックしてスコープを展開するまでに、データが入力されます。$watchwalks$resource$watch

問題を解決するには、リンク関数$watchでデータがいつ利用可能になるかを確認します。

scope.$watch('walks', function(walks) {
   console.log(scope.walks, walks);
})

本番コードでは、未定義にならないように注意してください。

scope.$watch('walks', function(walks) {
  if(walks) { ... }
})

更新： promiseをサポートするバージョンのAngularを使用している場合は、$resource@saweの回答も参照してください。

于 2013-01-31T21:04:57.437 に答える
12

あなたも使用することができます

scope.walks.$promise.then(function(walks) {
    if(walks) {
      console.log(walks);
    }
  });
于 2013-10-18T12:39:34.953 に答える
3

ControllerAs別の解決策は、ディレクティブの変数にアクセスできるディレクティブに追加することです。

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    controllerAs: 'dir',
    scope: { walks: '=walkmap' },
    template: '<div id="map_canvas"></div>',
    link: function(scope, element, attrs)
    {
      console.log(scope);
      console.log(scope.walks);
    }
  };
});

次に、ビューで、変数を使用して変数を渡しcontrollerAsます。

<div walkmap="store.walks" ng-init="dir.store.walks"></div>
于 2014-12-18T13:28:17.583 に答える
2

試す：

<div walk-map="{{store.walks}}"></div>

angular.module('app').directive('walkMap', function($parse) {
  return {
    link: function(scope, el, attrs) {
      console.log($parse(attrs.walkMap)(scope));
    }
  }
});
于 2015-04-12T23:23:57.793 に答える
0

宣言された$scope.storeは、コントローラーからは表示されません。関数内で宣言します。したがって、その関数のスコープ内でのみ表示されるため、これを外部で宣言する必要があります。

app.controller('MainCtrl', function($scope, $resource, ClientData) {
  $scope.store=[];         // <- declared in the "javascript" controller scope
  ClientData.get({}, function(clientData) {
  self.original = clientData;
  $scope.clientData = new ClientData(self.original);
  var storeToGet = "150-001 KT";
  angular.forEach(clientData.stores, function(store){
   if(store.name == storeToGet ) {
     $scope.store = store;      //declared here it's only visible inside the forEach
     }
   });
  });
 });
于 2013-01-31T17:22:27.377 に答える