각도 $ 범위 변수를 찾을 수 없습니다.

Question

저는 google-places 지시문을 사용하고 있지만 모든 사항이 정상 이었지만 갑자기 변수 $ scope.location이 컨트롤러에 정의되어 있지 않습니다. 그러나보기에서 그것은 사용할 수 있습니까?

무엇이 잘못 되었나요? 보기에서 감사

yuppiApp.directive('googlePlaces', function(){ 
    return { 
     restrict:'E', 
     replace:true, 
     scope: {location:'='}, 
     template: "<input id='google_places_ac' ng-model='google_map' name='map' type='text' required/>", 
     link: function($scope, elm, attrs){ 
      var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {}); 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       $scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng(); 
       console.log($scope.location); 
       $scope.$apply(); 
      }); 
     } 
    } 
}); 

코드 : 컨트롤러에서

{{ location }} 

<google-places location="location"></google-places> 

코드 : 내가 지시와 컨트롤러 두 경우 모두 CONSOLE.LOG ($ 범위)라고

$scope.addNew = function() { 
    console.log("Location: " + $scope.location); 
}; 

는과 보인다 거기에 $ 범위의 두 가지 버전이 있습니다. 나는 왜 그런지 이해하지 못한다.

Object { $id: "0U8", $$childTail: null, $$childHead: null, ....... 
Object { $id: "00M", this: Object, $$listeners: Object 

Answer 1

이 지시문을 템플릿의 다른 지시문에서 사용해야하며 해당 지시문이 하위 범위를 작성해야합니다. 그런 다음 두 개의 스코프로 끝나고 googlePlaces 지시문을 컨트롤러에 직접 액세스 할 수 없으며 자식 범위에 씁니다.

은 다음과 같이 코드를 변경

:보기에서

yuppiApp.directive('googlePlaces', function(){ 
    return { 
     restrict:'E', 
     scope: { 
      location: '=' 
     } 
     ... 

코드 : 컨트롤러에서

{{ data.location }} 

<google-places location="data.location"></google-places> 

코드 :

는

고립 범위되기 위해 당신의 지시에 다시 위치를 추가

$scope.data = { 
location: null 
}; 

이렇게하면 두 스코프 모두 동일한 객체 변수를 공유하게됩니다. 이것은 tht '점'규칙이 적용된 것입니다 (모든 바인딩에는.이 있어야합니다).

컨트롤러에 대한 controllerAs 구문과 지시문에 대한 격리 된 범위에 대해 배우는 것이 좋습니다.