2

これは、私がやろうとしていることを示すjsFiddleです: http://jsfiddle.net/P3c7c

Google Places AutoComplete ウィジェットを使用して緯度/経度座標を取得しています。これを後続の検索機能で使用したいと考えています。要素にイベント リスナーを追加する必要があることを考えると、これを実装する適切な方法は、ディレクティブを使用し、ディレクティブのリンク関数を使用してリスナーをアタッチすることであると思われました。ただし、このリスナー内で、その親である SearchForm コントローラーの location プロパティを設定する必要があります。そして、私はその接続を確立する方法を理解していません。関連するコードのチャンクは次のとおりです。

    /* Controllers */
    function SearchForm($scope){
        $scope.location = ''; // <-- this is the prop I wish to update from within the directive

        $scope.doSearch = function(){
            if($scope.location === ''){
                alert('Directive did not update the location property in parent controller.');
            } else {
                alert('Yay. Location: ' + $scope.location);
            }
        };
    }

    /* Directives */
    angular.module('OtdDirectives', []).
        directive('googlePlaces', function(){
            return {
                restrict:'E',
                replace:true,
                transclude:true,
                scope: {location:'=location'}, // <--prob something wrong here? i tried @/& too, no luck
                template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',
                link: function($scope, elm, attrs, ctrl){
                    var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
                    google.maps.event.addListener(autocomplete, 'place_changed', function() {
                        var place = autocomplete.getPlace();
                        // THIS IS THE STRING I WANT TO SAVE TO THE PARENT CONTROLLER
                        var location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
                        // THIS IS NOT DOING WHAT I EXPECT IT TO DO:
                        $scope.location = location;
                    });
                }
            }
        });

前もって感謝します。

4

1 に答える 1

3

2つのマイナーな修正とそれが機能するはずです：

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

ディレクティブ内に場所を設定するときは、次のことも行う必要があります$scope.$apply()

$scope.$apply(function() {
    $scope.location = location;
});

$apply()イベントはAngularダイジェストループの外部で発生するため、これを行う必要があります。そのため、スコープ内で何かが変更され、双方向バインディングやその他の内部非同期のものを「ダイジェスト」する必要があることをAngularに通知する必要があります。

また、私はあなたが必要とは思わないtransclude:true。

http://jsfiddle.net/P3c7c/1/

于 2013-01-08T17:02:39.933 に答える