0

我正在创建一个使用一些 angular-ui 指令的应用程序，例如 ui-map 指令及其依赖项 ui-event，事情是我想为具有一些共同功能的不同控制器创建路由，例如访问权限gmap 事件。为了实现这一点，我使用了 ng-View 本机 angular 指令，但问题是该指令创建了一个新范围，因此我无法访问预览范围。如果您阅读代码，也许您会更好地理解我。

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>

我如何才能访问父范围？

4

2 回答 2

0

您以错误的方式看待这个问题，范围继承对于像这样的控制器之间的两种方式共享来说是个坏主意。

这是一篇更详细地讨论范围继承的帖子： AngularJS中范围原型/原型继承的细微差别是什么？

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

如果你想为你的问题创建一个 plnkr 或 jsfiddle，我可以更详细地介绍。

编辑：

没错，您无权访问 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>

AddMarker 模板：

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

基本控制器：

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

AddMarker 控制器：

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

    $scope.addmarker = function() {
       MyService.addMarkerFunction($event, $params, $scope.myMap)
    }
}])
于 2013-09-14T21:41:42.323 回答
0

您可以使用 $rootScope

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

或 $emit() 和 $broadcast()

http://motionharvest.com/2013/03/21/passing-arugments-to-on-in-angularjs-from-emit-and-broadcast/
于 2013-09-14T19:36:11.770 回答