Angularjs가 객체를 지시로 전달

Angularjs가 객체를 지시로 전달

각진 신입사원.지시문에 물건을 넘기면서 무엇이 잘못되었는지 파악하려고 합니다.

제 지시는 다음과 같습니다.

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로 기록하다.undefined하는 동안에scope스코프로서 로그가 양호하고,walks내가 찾고 있는 모든 데이터를 가진 아이.

이 방법은 이전에 나에게 효과가 있었기 때문에 내가 여기서 무엇을 잘못하고 있는지 모르겠다.

편집:

필요한 모든 코드를 포함하는 http://plnkr.co/edit/uJCxrG를 만들었습니다.

보다시피{{walks}}스코프에서는 사용할 수 있습니다만, 아직 정의되지 않은 상태로 로깅되고 있는 링크 기능에서 액세스 할 필요가 있습니다.

사용하고 계시기 때문에$resource데이터를 취득하기 위해서, 디렉티브의 링크 기능은, 데이터를 사용할 수 있기 전에 실행됩니다(그 이유는, 그 결과입니다).$resource비동기)가 있기 때문에 링크 함수의 첫 번째가 됩니다.scope.walks비어 있거나 비어 있습니다.디렉티브 템플릿에는 다음 항목이 포함되어 있습니다.{{}}s, Angular는 a를 설정합니다.$watch에walks그래서, 그 때,$resource데이터를 채웁니다.$watch트리거 및 디스플레이가 업데이트됩니다.또한 콘솔에 walks 데이터가 표시되는 이유에 대해서도 설명합니다.링크를 클릭하여 범위를 확장할 때 데이터가 채워집니다.

문제를 해결하려면 링크 함수에서$watch데이터를 사용할 수 있는 시기를 알 수 있습니다.

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

프로덕션 코드에서 정의되지 않도록 주의하십시오.

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

업데이트: Angular 버전을 사용하는 경우:$resource@sawe의 답변도 참조하십시오.

를 사용할 수도 있습니다.

scope.walks.$promise.then(function(walks) {
    if(walks) {
      console.log(walks);
    }
  });

또 다른 해결책은 다음과 같습니다.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>

시험:

<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));
    }
  }
});

선언한 $controll.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
     }
   });
  });
 });

언급URL : https://stackoverflow.com/questions/14619884/angularjs-passing-object-to-directive