2012-06-24 2 views
3

Я хотел бы воспользоваться услугой $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 напрямую.

ответ

6

Используйте источник, Люк :-) 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» и выяснить, как/почему он транслируется.

+0

Спасибо, это действительно работает. Я использовал его в этом решении: http://stackoverflow.com/a/15169779/215945 –

Смежные вопросы