1

I am testing and app and would like to do something very simple. I would like to hide a div and only show it in the browser when an extension is added to the url. For example: 

<div ng-hide="true" class="cookie-banner">
   Warning you about cookies
</div>

I would see the hidden div by adding--> ?show=cookie-banner to the url, so local site like: ../webapp/#/subscribed would not show the hidden div but ../webapp/#/subscribed?show=cookie-banner this would. I am not sure what I am miising to make this work. Help Please!

tjg184
  • 4,508
  • 1
  • 27
  • 54
meztli
  • 449
  • 2
  • 9
  • 20

2 Answers2

1

You can use angular $location service in your controller or in a custom directive created by you, where your prefer to set your logic based on the $location.$$absUrl value.

//in your controller
app.controller('SomeController', ['$scope', '$location', 
  function ($scope, $location) { 

    $scope.hideBasedOnUrl =  $location.$$absUrl.indexOf('show=cookie-banner') !== -1;                 

  }]);

//html
<div ng-hide="hideBasedOnUrl " class="cookie-banner">
  Warning you about cookies
</div>


//in a directive
app.directive("hideBasedOnUrl", function ($location) {
return {
    restrict: "E",
    link: function (scope, element, attrs, ngModelCtrl) {
        if ($location.$$absUrl.indexOf('show=cookie-banner') !== -1){
          element.style.display = "none";
        }   
    }
}
});

//html
<div hideBasedOnUrl class="cookie-banner">
  Warning you about cookies
</div>

With the directive you can do something more advanced like pass the url value in the html as an attribute for when you wanna hide the div.

Hope this helps!

sergio
  • 619
  • 6
  • 16
0

I would strongly suggest not using your url as a way to pass parameters around in Angular. The functionality you're looking for should be contained within a controller.

Patrick Motard
  • 2,650
  • 2
  • 14
  • 23