AngularJS Ng-Route控制器失效及页面刷新问题求助

咱一步步拆解你遇到的两个问题，逐个排查解决：

一、controllerMap中的openEmModal函数无响应 #

大概率是作用域绑定或依赖注入的问题，你可以按下面的步骤检查：

• 确认controllerMap的作用域挂载：模板能访问到函数的前提是，controllerMap必须挂载到Angular的作用域里。如果用$scope语法，controller里要这么写：

  app.controller('TargetCtrl', ['$scope', function($scope) {
    // 把controllerMap绑定到$scope上
    $scope.controllerMap = {
      openEmModal: function() {
        // 这里写你的模态框逻辑，比如调用$modal服务
      }
    };
  }]);
  

  如果用controllerAs语法（比如路由配置了controllerAs: 'vm'），就要绑定到this上：

  app.controller('TargetCtrl', function() {
    var vm = this;
    vm.controllerMap = {
      openEmModal: function() {
        // 模态框逻辑
      }
    };
  });
  

  模板里也要对应写成vm.controllerMap.openEmModal()，不然模板找不到这个函数。
• 检查函数内的依赖注入：如果openEmModal里用到了$modal（UI Bootstrap模态框服务）这类Angular服务，一定要确保这些服务已经注入到controller中，比如：

  app.controller('TargetCtrl', ['$scope', '$modal', function($scope, $modal) {
    $scope.controllerMap = {
      openEmModal: function() {
        // 正确使用注入的$modal服务
        $modal.open({
          templateUrl: 'em-modal.html',
          controller: 'EmModalCtrl'
        });
      }
    };
  }]);
  

  没注入的话函数执行会报错，记得打开浏览器开发者工具的Console面板看错误信息，这是快速定位问题的关键。
• 验证路由与controller的关联：检查你的ngRoute配置，确保目标路由正确绑定了对应的controller，比如：

  app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/your-page', {
      templateUrl: 'your-page-template.html',
      controller: 'TargetCtrl' // 这里要和你定义的controller名字完全一致
    });
  }]);
  

  如果路由没绑定对controller，那controller里的函数自然不会生效。

二、标记位置改变时页面刷新 #

这个问题是因为你直接操作了原生window.location，导致浏览器整页刷新，得换成Angular的方式修改URL：

• 用$location服务替代window.location：放弃直接修改window.location.href，改用Angular的$location服务更新URL参数或路径，比如：

  // 错误写法（会触发页面刷新）
  // window.location.href = '/your-page?lat=' + newLat + '&lng=' + newLng;
  
  // 正确写法（不会刷新页面，ngRoute会监听变化）
  app.controller('MapCtrl', ['$scope', '$location', function($scope, $location) {
    marker.addListener('position_changed', function() {
      var pos = marker.getPosition();
      // 更新URL的查询参数
      $location.search({ lat: pos.lat(), lng: pos.lng() });
      // 如果是修改路径的话用$location.path('/new-path')
    });
  }]);
  

  $location是Angular提供的服务，修改URL时会走Angular的路由机制，不会触发整页刷新。
• 手动触发$apply（针对第三方事件）：如果你的标记位置监听是第三方库（比如谷歌地图API）的事件，这个事件不在Angular的脏检查周期里，需要手动调用$scope.$apply()让Angular感知到变化：

  marker.addListener('position_changed', function() {
    var pos = marker.getPosition();
    $scope.$apply(function() {
      $location.search({ lat: pos.lat(), lng: pos.lng() });
    });
  });
  

  这样能确保Angular执行脏检查，同步路由状态而不刷新页面。
• 排查默认事件：如果标记移动绑定了DOM的拖动/点击事件，可以试试在事件回调里加event.preventDefault()，阻止浏览器的默认行为，不过这个一般不是主要原因，但可以作为排查项。

最后提醒下，遇到这类问题一定要打开浏览器的开发者工具，看Console面板的报错信息，很多时候错误提示直接就能帮你定位问题根源。

内容的提问来源于stack exchange，提问作者Hermes