Programing

AngularJS를 사용하여 새 창에서 링크 열기

crosscheck 2020. 11. 7. 09:00
반응형

AngularJS를 사용하여 새 창에서 링크 열기


사용자가 링크를 클릭 할 때 새 창에서 링크를 열도록 AngularJS에 알리는 방법이 있습니까?

jQuery를 사용하면 다음과 같이 할 수 있습니다.

jQuery("a.openInNewWindow").click( function() {
    window.open(this.href);
    return false;
})

AngularJS와 동등한 것이 있습니까?


다음 속성 이있는 target="_blank"모든 <a>태그에 추가 지시문입니다 href. 즉, 모두 새 창에서 열립니다. dom 조작 / 동작을 위해 Angular에서 지시문이 사용된다는 것을 기억하십시오. 라이브 데모 (클릭).

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

덜 침습적 (모든 링크에 영향을주지 않음)하고 더 적응할 수있는 동일한 개념이 있습니다. 부모 요소에서 사용하여 모든 자식 링크에 영향을 줄 수 있습니다. 라이브 데모 (클릭).

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

이전 답변

태그에 사용 "target="_blank"하는 것 같습니다 <a>. 두 가지 방법이 있습니다.

<a href="//facebook.com" target="_blank">Facebook</a>
<button ng-click="foo()">Facebook</button>

자바 스크립트 :

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $window) {
  $scope.foo = function() {
    $window.open('//facebook.com');
  };
});

여기에서 라이브 데모 (클릭).

문서는 다음과 같습니다 $window. http://docs.angularjs.org/api/ng.$window

을 사용할 수는 window있지만 $window테스트 목적으로 각도를 전달하는 종속성 주입을 사용하는 것이 좋습니다 .


그것은 나를 위해 작동합니다. $window컨트롤러에 서비스를 주입 하십시오.

$window.open("somepath/", "_blank")

당신이 사용할 수있는:

$window.open(url, windowName, attributes);

이것은 버튼의 코드입니다

<a href="AddNewUserAdmin" 
   class="btn btn-info " 
   ng-click="showaddnewuserpage()">
  <span class="glyphicon glyphicon-plus-sign"></span> Add User</a>

컨트롤러에서이 기능을 추가하십시오.

 var app = angular.module('userAPP', []);

app.controller('useraddcontroller', function ($scope, $http, $window) {

$scope.showaddnewuserpage = function () {

    $window.location.href = ('/AddNewUserAdmin');
}

});

@ m59 지시문은 ng-bind-html에서 작동하므로 $viewContentLoaded완료 될 때까지 기다려야합니다.

app.directive('targetBlank', function($timeout) {
  return function($scope, element) {
    $scope.initializeTarget = function() {
      return $scope.$on('$viewContentLoaded', $timeout(function() {
        var elems;
        elems = element.prop('tagName') === 'A' ? element : element.find('a');
        elems.attr('target', '_blank');
      }));
    };
    return $scope.initializeTarget();

  };
});

나는 그 문제에 대한 해결책을 찾는 누구에게나 매우 도움이 될 수 있다고 생각하는 작은 요점을 썼습니다 : 외부 링크

그것이하는 일은 target="_blank"현재 도메인과 다른 도메인에 링크되는 앵커 요소에 속성을 추가 하는 것입니다. 당신이 적합하다고 생각되는 모든 것에 패치를 적용 할 수 있습니다.


I have gone through many links but this answer helped me alot:

$scope.redirectPage = function (data) { $window.open(data, "popup", "width=1000,height=700,left=300,top=200"); };

** data will be absolute url which you are hitting.

참고URL : https://stackoverflow.com/questions/20099784/open-links-in-new-window-using-angularjs

반응형