Open a new page using Angular JS

Question

Hi, I am trying to open a new page on clicking of a link instead of opening it in the same page.

I am new to angular and unable to achieve.

I need help regarding this.

This is What I have tried so far.

HTML:

<ul ng-controller="ListController">
    <li ng-repeat="item in items" ng-controller="ItemController">
        <div ng-click="open(item)">{{item.content}}</div>        
    </li>
    <hr>
    <ng-switch on="anyItemOpen()">
     <div ng-switch-when="true">
         <div ng-controller="ItemController">
             {{opened.name}}: overlay: tweet, share, pin
         </div>  
         <a ng-click="close()">close</a>         
     </div>
    </ng-switch>   
</ul>

JS:

function ItemController($scope) {
}

function ListController($scope) {
    $scope.items = [
        {name: 'item1', content: 'content1'},
        {name: 'item2', content: 'content2'},
        {name: 'item3', content: 'content3'}
    ];

    $scope.open = function(item){
        if ($scope.isOpen(item)){
            $scope.opened = undefined;
        } else {
            $scope.opened = item;
        }        
    };

    $scope.isOpen = function(item){
        return $scope.opened === item;
    };

    $scope.anyItemOpen = function() {
        return $scope.opened !== undefined;
    };

    $scope.close = function() {
        $scope.opened = undefined;
    };
}

This is My Working Demo

Trying to open the links in a new window like that might cause some problems. Angular is meant to provide a "one page application" experience, and your request means your new window wont have the same scope that your application previously had as technically you're creating a new app. — Jorg, May 05 '14 at 06:30

score 0 · Answer 1 · edited May 23 '17 at 10:32

Directive that will add target="_blank" to all tags with an href attribute. That means they will all open in a new window. Remember that directives are used in Angular for any dom manipulation/behavior. Live demo (click).

app.directive('href', function() {
  return {
    compile: function(element) {
      element.attr('target', '_blank');
    }
  };
});

Here's the same concept made less invasive (so it won't affect all links) and more adaptable. You can use it on a parent element to have it affect all children links. Live demo (click).

app.directive('targetBlank', function() {
  return {
    compile: function(element) {
      var elems = (element.prop("tagName") === 'A') ? element : element.find('a');
      elems.attr("target", "_blank");
    }
  };
});

check out this post here

Open a new page using Angular JS

1 Answers1