각도 지침 및 범위 업데이트

Question

내가 지금 일을하고 현재 내가 내 머리를 당겨있어 뭔가를 얻기 위해 지금 7 시간 동안 노력하고

미친 얻기 !!!!
믿을 수 없음!

난 그냥 고립 된 지침에서 컨트롤러 변수를 업데이트 할.
그리고 미친 문제는 모든 것이 완벽하게 작동한다는 것입니다. 그러나 컨트롤러에서 그는 변화를 인식하지 못합니다! 그는 타이프하여 생성되므로

제어기는 다음과 같다.

/* 
ANGULAR CONTROLLER 
*/ 

var CustomerdataTabCtrl = (function() { 
    function CustomerdataTabCtrl($scope) { 
     $scope.AddressAutocompleteOptions = {}; 
     $scope.AddressAutocompleteOptions.watchEnter = true; 
     $scope.AddressAutocompleteDetails = ''; 
     $scope.AddressAutocompleteAddress = null; 

     $scope.onRoleChange = function() { 
      if ($scope.Role == 'Provider') { 
       $('#orders-tab-header').css('display', 'none'); 
      } else { 
       $('#orders-tab-header').css('display', 'block'); 
      } 
     }; 

     $scope.onAddressAutocompleteChange = function() { 
      alert('asd'); 
     }; 

     $scope.$watch('Role', function() { 
      return $scope.onRoleChange(); 
     }, true); 
     $scope.$watch('AddressAutocompleteAddress', function() { 
      return $scope.onAddressAutocompleteChange(); 
     }, true); 
    } 
    return CustomerdataTabCtrl; 
})(); 

/* 
ANGULAR DIRECTIVE 
*/ 
angular.module("ngAutocomplete", []) 
    .directive('ngAutocomplete', function() { 
     return { 
      require: 'ngModel', 
      scope: { 
       ngModel: '=', 
       options: '=', 
       details: '=', 
       address: '=' 
      }, 

      link: function (scope, element, attrs, controller) { 

       //options for autocomplete 
       var opts; 
       var watchEnter = false; 
       //convert options provided to opts 
       var initOpts = function() { 

        opts = {}; 
        if (scope.options) { 

         if (scope.options.watchEnter !== true) { 
          watchEnter = false 
         } else { 
          watchEnter = true 
         } 

         if (scope.options.types) { 
          opts.types = []; 
          opts.types.push(scope.options.types); 
          scope.gPlace.setTypes(opts.types) 
         } else { 
          scope.gPlace.setTypes([]) 
         } 

         if (scope.options.bounds) { 
          opts.bounds = scope.options.bounds; 
          scope.gPlace.setBounds(opts.bounds) 
         } else { 
          scope.gPlace.setBounds(null) 
         } 

         if (scope.options.country) { 
          opts.componentRestrictions = { 
           country: scope.options.country 
          }; 
          scope.gPlace.setComponentRestrictions(opts.componentRestrictions); 
         } else { 
          scope.gPlace.setComponentRestrictions(null); 
         } 
        } 
       }; 

       if (scope.gPlace == undefined) { 
        scope.gPlace = new google.maps.places.Autocomplete(element[0], {}); 
       } 

       google.maps.event.addListener(scope.gPlace, 'place_changed', function() { 
        var result = scope.gPlace.getPlace(); 
        if (result !== undefined) { 
         if (result.address_components !== undefined) { 
          scope.$apply(function() { 
           scope.address = parseGoogleResponse(result.address_components); 
           scope.details = result; 
           controller.$setViewValue(element.val()); 
          }); 
         } 
         else { 
          if (watchEnter) { 
           getPlace(result) 
          } 
         } 
        } 
       }); 

       //function to get retrieve the autocompletes first result using the AutocompleteService 
       var getPlace = function (result) { 
        ...      
       }; 


       var parseGoogleResponse = function(components) { 
        var result = {}; 

        for (var i = 0; i < components.length; i++) { 
         var addressType = components[i].types[0]; 
         result[addressType] = components[i]['long_name']; 
        } 

        return result; 
       }; 


       controller.$render = function() { 
        var location = controller.$viewValue; 
        element.val(location); 
       }; 

       //watch options provided to directive 
       scope.watchOptions = function() { 
        return scope.options 
       }; 
       scope.$watch(scope.watchOptions, function() { 
        initOpts() 
       }, true); 
      } 
     }; 
    }); 

HTML

<div ng-controller="CustomerdataTabCtrl"> 
<input type="text" id="customerdata_quick_auto_address" name="customerdata_quick_auto_address" class="form-control input-sm" ng-autocomplete ng-model="AddressAutocomplete" options="AddressAutocompleteOptions" details="AddressAutocompleteDetails" address="AddressAutocompleteAddress" /> 
{{AddressAutocompleteAddress.route}} 
</div> 

내가보기가 올바른 결과를 출력하지만, 컨트롤러 시계는 초기화 한 번에 화재 않습니다,하지만 결코 다시하지만 같은 쿵푸이다 말했듯이 ... 변수. {{AddressAutocompleteAddress.route}}보기는 컨트롤러 스코프 변수를 사용합니다. 정말 미쳐 가고 있습니다! 나는 내 댓글에서 언급 한 것처럼

종류는이 변수의 범위 지정에 문제가,

Answer 1

을 간주한다. 지시문의 격리 범위는 "기본"변수이기 때문에 AddressAutocompleteAddress 변수의 자체 인스턴스로 만듭니다. 이 문제를 해결하는 방법은 "." (도트) 표기법.

는 내가 아마 코드에 할 것입니다 것은 AddressAutocomplete라는 개체를 만든 다음 해당 개체에 다른 변수를 추가하는 것입니다.

function CustomerdataTabCtrl($scope) { 
    $scope.AddressAutocomplete = {}; 
    $scope.AddressAutocomplete.Text = ''; 
    $scope.AddressAutocomplete.Options = {}; 
    $scope.AddressAutocomplete.Options.watchEnter = true; 
    $scope.AddressAutocomplete.Details = ''; 
    $scope.AddressAutocomplete.Address = null; 
    ... 
} 

그리고 당신의 HTML에서

:

<div ng-controller="CustomerdataTabCtrl"> 
    <input type="text" id="customerdata_quick_auto_address" 
     name="customerdata_quick_auto_address" 
     class="form-control input-sm" ng-model="AddressAutocomplete.Text" 
     ng-autocomplete options="AddressAutocomplete.Options" 
     details="AddressAutocomplete.Details" address="AddressAutocomplete.Address" /> 
    {{AddressAutocomplete.Address.route}} 
</div> 

그냥 당신이 컨트롤러의 변수를 사용하는 방법을 업데이트해야합니다. 또한 지시문에 변수 ng-model을 사용하는 곳이 표시되지 않으므로 왜 사용하고 있는지 잘 모르겠습니다.

또 다른 한가지는, 지시어에 ng- 접두어를 사용하면 안됩니다. 이것은 AngularJs 라이브러리의 지시문에 예약 된 접두어입니다.