javascript - 在 AngularJS 指令中正确实现对象属性的绑定(bind)

Question

我创建了一个 AngularJS 指令来包装 Google map 自动完成的 Geocomplete 插件。我试图将其绑定(bind)到范围的属性，该属性是通过向现有元素添加“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 似乎能够通过自己的绑定(bind)来做到这一点，但我该如何自己实现呢？

编辑

我知道如何使用 split 和 for 循环来完成此操作，但这可能不是“正确”的方式。

Answer 1

我认为您的指令只有两处更改。添加范围，将 geocomplete 属性上的任何值绑定(bind)到“位置”，然后在范围中使用 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());
                });
            }
        });
    }
 };
});