如何提交表单并从 google 地图标记获取数据？

Question

使用 Angular google map 插件。我正在尝试在 google 地图标记信息窗口中提交表单并在我的控制器中读取数据。

我无法在我的控制器中检测到对 "Ok" 的点击。

$scope.register = function()
{
     console.log('register clicked');
}

我无法看到此日志打印。

<ui-gmap-google-map >
                <ui-gmap-marker >
                    <ui-gmap-window options="windowOptions" show="true" closeClick="closeClick()">
                        <form class="form "  >
                                <label >Name</label>&nbsp;
                                <input  type="text" ng-model="name"/>

                                <label>Place</label>&nbsp;
                                <input  type="text" ng-model="place"/>

                                <button type="submit"  ng-click="register()">Ok</button>
                                 <button type="button"  ng-click="closeClick()">Cancel</button>  
                        </form>
                    </ui-gmap-window>
                </ui-gmap-marker>
            </ui-gmap-google-map>

Answer 1

ui-gmap-window 内容在另一个范围内。假设你的主控制器中有 register() 函数，如果你想从 map-window 访问它，你需要使用 $parent 调用它两次：

<button ng-click="$parent.$parent.register()">Ok</button>

这是一个 plunker，您可以在其中看到它的工作原理。

希望对您有所帮助。

Answer 2

不建议使用 $parent.$parent，因为您直接引用父范围，请修改您的代码，使您使用的控制器在 google 映射范围内 UI ，我的回答可能含糊不清，但会帮助你获得一些线索 - 让它从地图控制器的范围内调用你的函数

.controller("someController", function($scope, uiGmapGoogleMapApi) {
    uiGmapGoogleMapApi.then(function(maps) {

    });
     $scope.register = function(){
        // do something
      };
});

Answer 3

我已经使用 Angularjs 的 Compile 服务解决了它。

只需要给弹窗分配一个ID，编译即可。

var pp = angular.element(document.querySelector('#id_poup_element'));

$编译(pp)($scope);

很高兴回答任何问题。

如何提交表单并从 google 地图标记获取数据？

How to submit a form and get data from google map marker?

javascript

angularjs

google-maps-api-3

angular-google-maps