38725

AngularJS $location without templates

Question:

I would like to use the $locationProvider service in AngularJS without rendering a new HTML template in my ng-view.

I have a div element that is shown on demand via ng-show binding to the existence of a data element. I would like to wire this to the browser location via the $locationProvider but stay within the same template.

Template:

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

Controller:

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

I can't figure out how to integrate the $location service in this. AngularJS also overwrites the location if it is set with history.pushState directly.

Answer1:

Use the source, Luke :-) <a href="http://code.angularjs.org/1.0.0/angular-1.0.0.js" rel="nofollow">http://code.angularjs.org/1.0.0/angular-1.0.0.js</a>

If you look at the ngViewDirective (which is actually super simple), it just catches the '$routeChangeSuccess' event and changes view accordingly.

So you could catch $routeChangeSuccess and then inject $route into your controller, check if the new route is the one you want, and show accordingly. (I think :D)

This might work (untested):

//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; }); }

I hope it works, and if it doesn't it should be enough to start with. I encourage you to read the ngViewDirective, and if this doesn't work search for '$routeChangeSuccess' and figure out how/why it gets broadcasted.

Recommend

  • cell spacing in div table
  • XSLT foreach repeating nodes to flat
  • How to create a 2D image by rotating 1D vector of numbers around its center element?
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Updating Dojo provide
  • Possible to “watch” both HAML and SASS at the same time?
  • How to specify input and output paths from cmd.exe for a PowerShell script?
  • Thread 1: EXC_BAD_ACCESS (code =1 address = 0x0)
  • ThreadStatic in asynchronous ASP.NET Web API
  • Suppressing passwd when calling sqlplus from shell script
  • ASP.NET MVC Application won't update some controllers
  • CakePHP ACL tutorial initDB function warnings
  • Tamper-proof configuration files in .NET?
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • JQuery Internet Explorer and ajaxstop
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Setting up SourceTree to merge unity3d scenes with UnityYAMLMerge
  • Android full screen on only one activity?
  • Is it possible to access block's scope in method?
  • The plugin 'org.apache.maven.plugins:maven-jboss-as-plugin' does not exist or no valid ver
  • bootstrap to use multiple ng-app
  • Linker errors when using intrinsic function via function pointer
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • LevelDB C iterator
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How can i traverse a binary tree from right to left in java?
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?