我正在访问的页面上的AngularJS整页刷新,而不是当前的

时间:2015-07-01 18:03:59

标签: javascript jquery angularjs

我在我的主页上使用maphilight但是如果我路由到另一个部分然后返回到该主页,则maphilight停止工作。但是,如果我然后刷新页面,它会再次起作用。我每次导航回来时如何强制刷新主页?我看到有人能够用

刷新当前页面
$scope.reloadPage = function(){window.location.reload();}

<a ng-click="reloadPage()" href="index.html#/diagram">Back to search</a>

但是我无法刷新我导航到的页面。提前谢谢

这是我链接到并希望刷新的页面的控制器:

roomControllers.controller('DiagramController', ['$scope', '$route',  '$http', function($scope, $route, $http) {
$http.get('js/master.json').success(function(data) {
   $scope.rooms = data;
   $scope.reloadPage = function(){window.location.reload();}
});
}]);

此处是页面中我来自

的链接
<a ng-click="reloadPage()" href="index.html#/diagram">&laquo; Back to search</a>

这是应用代码

var myApp = angular.module('myApp', [
 'ngRoute',
 'roomControllers'
]);

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/diagram', {
    templateUrl: 'partials/diagram.html',
    controller: 'DiagramController'
  }).
  when('/diagram/:roomId', {
    templateUrl: 'partials/room-details.html',
    controller: 'RoomDetailsController'
  }).
  otherwise({
    redirectTo: '/diagram'
  });
}]);

myApp.directive('highlight', function() {
    return {
        restrict: 'A',
        link: $(function(scope, element, attrs) {
          $('img[usemap]').maphilight();
     })};

});

最后突出显示了imagemap的html:

<div class="info">
  <img ng-src="images/housediagram.jpg" alt="Photo of thing" class="map" usemap="#houseMap" highlight>

  <map name="houseMap" id="map">
    <area ng-repeat="room in rooms" name="{{room.name}}" id="{{room.id}}" shape="poly" coords="{{room.coords}}" href="#/diagram/{{room.id}}" />
  </map>
</div>

2 个答案:

答案 0 :(得分:0)

试试这个, 如果您正在寻找页面的完整刷新。

{{1}}

答案 1 :(得分:0)

我认为你不应该试图重新加载整个页面 - 这表明你没有在Angular系统中实现你想要的东西。我所说的是你不应该强迫页面重新加载只是为了让脚本运行。做这样的事情:

HTML:

<div data-ng-controller="yourContoller" data-ng-init="load();"></div>

JS:

.when('/example', {
        templateUrl : 'pages/example.html',
        controller  : 'yourController',
    })

app.controller('yourController', function($scope) {

$scope.load = function() { //PUT YOUR SCRIPTS HERE }

}

这样,脚本将在每次加载页面时运行,包括第一次(以及任何后续时间)。

您也可以在ng-onload中使用现有指令。