AngularJS $location без шаблонов

Я хотел бы использовать службу $locationProvider в AngularJS без рендеринга нового шаблона HTML в моем файле ng-view.

У меня есть элемент div, который отображается по запросу через привязку ng-show к существованию элемента данных. Я хотел бы подключить это к местоположению браузера через $locationProvider, но остаться в том же шаблоне.

Шаблон:

<div> other stuff ... </div>

<div ng-show="model">{{ model.element }}</div>

Контроллер:

Controller = function($scope, $location) {
  $scope.show = function() {
    $scope.model = model;    // show div
  }

  $scope.hide = function() {
    $scope.model = null;    // hide div
  }
}

Я не могу понять, как интегрировать службу $location в это. AngularJS также перезаписывает местоположение, если оно установлено напрямую с помощью history.pushState.


javascript angularjs browser-history
person Mel    schedule 24.06.2012    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Используйте источник, Люк :-) http://code.angularjs.org/1.0.0/angular-1.0.0.js

Если вы посмотрите на ngViewDirective (который на самом деле очень прост), он просто перехватывает событие «$ routeChangeSuccess» и соответствующим образом меняет представление.

Таким образом, вы можете поймать $routeChangeSuccess, а затем ввести $route в свой контроллер, проверить, является ли новый маршрут тем, который вам нужен, и отобразить его соответствующим образом. (думаю :D)

Это может сработать (не проверено):

//declare a route so angular knows to broadcast about it when it's hit
//We aren't declaring any actions for the route though,
//since below we define custom actions
myApp.config(function($routeProvider) {
  $routeProvider.when('/superman', {});
}); 

function SupermanCtrl($scope, $route) {
  $scope.$on('$routeChangeSuccess', function() {
    //If this doesn't work, console.log $route.current to see how it's formatted
    if ($route.current == '/superman')
      $scope.show = true;
    else
      $scope.show = false;
  });
}

Я надеюсь, что это работает, и если это не так, этого должно быть достаточно для начала. Я рекомендую вам прочитать ngViewDirective, и если это не сработает, найдите «$ routeChangeSuccess» и выясните, как и почему он транслируется.

person Andrew Joslin    schedule 24.06.2012
comment
Спасибо, это работает. Я использовал его в этом решении: stackoverflow.com/a/15169779/215945 - person Mark Rajcok; 02.03.2013