2

Google Maps Autocomplete の Geocomplete プラグインをラップする AngularJS ディレクティブを作成しました。既存の要素に「geocomplete」属性を追加することで指定されるスコープのプロパティにバインドしようとしています。

    geocompleteModule.directive("geocomplete", function ($log, $timeout, $compile, $controller) {
        return {
            restrict: 'A',
            priority: 200,
            link: function (scope, element, attrs, ctrl) {
                var autocomplete = $(element).geocomplete().bind("geocode:result", function (event, result) {
                    if(result.geometry && result.geometry.location) {
                        var location = result.geometry.location;
                        scope.$apply(function (s) {
                            s[attrs.geocomplete] = new Models.Point(location.lat(), location.lng());
                        });
                    }
                });
            }
        };
    });

ただし、geocomplete 属性で参照されるプロパティがサブプロパティである場合、これは機能しません。例えば：

<input geocomplete="location" />

動作します。

<input geocomplete="search.location" />

動作しないでしょう。

本来、AngularJS は独自のバインディングでこれを行うことができるようですが、これを自分で実装するにはどうすればよいでしょうか?

編集

split と for ループを使用してこれを行う方法は知っていますが、おそらくこれは「適切な」方法ではありません。

4

2 に答える 2

2

あなたのディレクティブに見られる変更は 2 つだけです。スコープを追加し、geocomplete 属性の任意の値を「場所」にバインドしてから、スコープで s[scope.location] を使用します.$apply

ディレクティブのドキュメント: http://docs.angularjs.org/guide/directive

geocompleteModule.directive("geocomplete", function ($log, $timeout, $compile, $controller) {
 return {
    restrict: 'A',
    scope:{
      location:'=geocomplete'  
    },
    priority: 200,
    link: function (scope, element, attrs) {
        var autocomplete = $(element).geocomplete().bind("geocode:result", function (event, result) {
            if(result.geometry && result.geometry.location) {
                var location = result.geometry.location;
                $timeout(function() {
                    scope.location = new Models.Point(location.lat(), location.lng());
                });
            }
        });
    }
 };
});
于 2012-11-12T21:10:02.227 に答える
0 
s[attrs.geocomplete] = new Models.Point(location.lat(), location.lng());

次のように置き換えます。

var a = function(){};
var s = [];

s.push( { 'attr' : 'aaa.bbb', 'method' : new a() } );
于 2012-11-12T15:59:36.980 に答える