Javascript AngularJS控制器范围问题_Javascript_Google Maps_Angularjs

Javascript AngularJS控制器范围问题

javascript google-maps angularjs

Javascript AngularJS控制器范围问题,javascript,google-maps,angularjs,Javascript,Google Maps,Angularjs,我正在创建一个应用程序，它使用一些角度ui指令，例如ui映射指令和它的依赖项ui事件。我想为不同的控制器创建路由，这些控制器有一些共同的功能，例如访问gmap事件。为了实现这一点，我使用了angular的ng View本机指令，但问题是该指令创建了一个新范围，因此我无法访问previews范围。如果你读一下代码，也许你能更好地理解我 angular.module('Maptesting', ['ngRoute', 'ui.map', 'ui.event']) .config (function

我正在创建一个应用程序，它使用一些角度ui指令，例如ui映射指令和它的依赖项ui事件。我想为不同的控制器创建路由，这些控制器有一些共同的功能，例如访问gmap事件。为了实现这一点，我使用了angular的ng View本机指令，但问题是该指令创建了一个新范围，因此我无法访问previews范围。如果你读一下代码，也许你能更好地理解我

angular.module('Maptesting', ['ngRoute', 'ui.map', 'ui.event'])

.config (function ($routeProvider) {
    $routeProvider

    .when('/', {

    })

    .when('/newSector', {
        templateUrl: 'newSector.html',
        controller: 'newSector'
    })
})


.controller('CtrlGMap', ['$scope', function($scope) {
    $scope.mapOptions = {
        center: new google.maps.LatLng(-54.798112, -68.303375),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        disableDefaultUI: true
    };

}])


.controller('newMarker', ['$scope', function($scope){
    $scope.myMarker = null;

    $scope.addMarker = function ($event, $params) {
           $scope.myMarker = new google.maps.Marker({
            map: $scope.myMap,
                position: $params[0].latLng,
                   })
       };
}])

HTML:

<body ng-controller="CtrlGMap" id="map">

<div id="map_canvas" class="map-canvas" ui-map="myMap"
                                        ui-event="{'map-click': 'addMarker($event, $params)'}" 
                                        ui-options="mapOptions"></div>

<div ui-map-info-window="myInfoWindow">
    <p>{{ name || "Set the name"}}</p>
</div>

<div ui-map-marker="myMarker"
     ui-event="{'map-click': 'openMarkerInfo(myMarker)'}">
</div>

<div ng-view></div>


{{name | |“设置名称”}

如何访问父作用域？

您可以使用$rootScope

http://docs.angularjs.org/api/ng.$rootScope.Scope

或$emit（）和$broadcast（）

你看得不对，作用域继承对于这样的控制器之间的双向共享是个坏主意

这里有一篇文章更详细地介绍了范围继承：

通常，当您想要在控制器之间共享某些内容时，您应该使用服务，将您想要的功能放入服务中，然后将其注入所需的控制器中

如果您想创建一个plnkr或JSF来解决您的问题，我可以更详细地介绍

编辑：

你说得对，你没有访问newSector控制器的权限。您将无法使用此模式访问addmarker函数。您需要阅读上面的链接，了解为什么您没有访问权限，并且不想尝试使用控制器继承来实现这一点

您需要为所需的每个视图/功能创建单独的控制器和模板。可以放入服务中的任何共享函数或变量，可以将其注入两个控制器

配置：

.when('/', {
    templateUrl: 'base.html',
    controller: 'BaseCtrl'
})
.when('/newSector', {
    templateUrl: 'addmarker.html',
    controller: 'AddMarkerCtrl'
})

基本模板：

<div id="map_canvas" class="map-canvas" ui-map="myMap"
                                        ui-options="mapOptions"></div>

<div id="map_canvas" class="map-canvas" ui-map="myMap"
                                        ui-event="{'map-click': 'addMarker($event, $params)'}" 
                                        ui-options="mapOptions"></div>

AddMarker控制器：

.controller('BaseCtrl', ['$scope', function($scope, MyService) {
    $scope.mapOptions = MyService.options
}])

.controller('AddMarkerCtrl', ['$scope', function($scope, MyService) {
    $scope.mapOptions = MyService.options

    $scope.addmarker = function() {
       MyService.addMarkerFunction($event, $params, $scope.myMap)
    }
}])

但是如何从$parent访问$event和$params？类似于$parent.$event？问题是它甚至没有调用addMarker（）方法。我认为这是因为我没有访问ui事件范围的权限，因为ng view指令创建了一个新的范围。我如何将示波器从GMap控制器传递到newSector控制器？你能准确地解释一下你想要什么吗。这是jsfiddle。我想我没有从CtrlMap访问newSector控制器的权限，因此我可以在单击地图时访问.addMarker方法。我只需要在newSector URL上调用addMarker，这样我就不会在其他视图上添加标记。。。

.controller('AddMarkerCtrl', ['$scope', function($scope, MyService) {
    $scope.mapOptions = MyService.options

    $scope.addmarker = function() {
       MyService.addMarkerFunction($event, $params, $scope.myMap)
    }
}])