2016-05-30 25 views
0

I have a situation (modal popup) that classical link using <a href> does not work, so I need to simulate that link behavior in a <div>. CODEPEN link シミュレート "<a href>" in Angular

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

 
myApp.controller('testCtrl', ['$scope', '$window', function($scope, $window) { 
 
    $scope.greeting = 'Hola!'; 
 
    $scope.myAlert = function(event) { 
 
    console.log('this is the $scope.greeting'); 
 
    console.log($scope.greeting); 
 
    console.log('this is the $window.location.href:'); 
 
    console.log($window.location.href); 
 
    console.log('this is the event.target.dataset.href:'); 
 
    console.log(event.target.dataset.href); 
 
    $window.location.href = event.target.dataset.href; 
 
    } 
 
}]);
<div ng-app="myApp" ng-controller="testCtrl"> 
 
    <div data-href="http://test.com" ng-click="myAlert($event);">CLICK ME!</div> 
 
    <div ng-click="$window.location.href='http://test.com';">DIRECTT LINK!</div> 
 
</div>

なぜ第二のdivはクリックで何もしない?

NB。私は、ポップアップでリンクを開く必要はありません

または新しい未亡人、私のdivは既にポップアップにあるので、私はちょうどa hrefのような同じ未亡人でそのリンクを開く必要がある、私が必要なすべてです。

つまり、「a href」を使用せずにリンクを開く必要があります。 HTMLは$ウィンドウを認識していないため、

+0

@charlietfl、いくつかのケースでは、テンプレートを使用するモーダル角度ウィンドウ "a href"は機能しませんが、その問題は... – Serge

+0

最終結果をモーダルにする必要がありますかそのリンクの情報を開く? –

答えて

0

使用<div onclick="window.location.replace('http://test.com')"></div>

+0

私はdownvoteをしませんでしたが、私はAngularでjavascript "window"の代わりに$ windowを直接使う方が良いと知っています... https:///docs.angularjs.org/api/ng/service/$window – Serge

+0

Angularの '$ window'ラッパーを使用してください。 –

+0

@Serge - ' $ window'はすべてのコンテキストで利用できるとは限りません。あなたが気づいたら、それはあなたがリンクしたドキュメントのコントローラに '注入されました。 'ng-click'がコントローラー関数を起動し、コントローラー内の' $ window'を参照するパターンに従います。 –

2

あなたのコードが動作していない...それは独立したファイルで、URLが生成されたHTMLであるので、私はJavaScriptでURLを置くことができませんHTMLスクリプト内

<div ng-app="myApp" ng-controller="testCtrl"> 
     <div data-href="http://test.com" ng-click="myAlert($event);">CLICK ME!</div> 
     <div ng-click="openLink('http://test.com');">DIRECTT LINK!</div> 
    </div> 

でこれを試してみてください :

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

    myApp.controller('testCtrl', ['$scope', '$window', function($scope, $window) { 
     $scope.greeting = 'Hola!'; 
     $scope.myAlert = function(event) { 
     console.log('this is the $scope.greeting'); 
     console.log($scope.greeting); 
     console.log('this is the $window.location.href:'); 
     console.log($window.location.href); 
     console.log('this is the event.target.dataset.href:'); 
     console.log(event.target.dataset.href); 
     $window.location.href = event.target.dataset.href; 
     } 

     $scope.openLink = function(link){ 
     $window.location.href = link; 
     }; 

    }]); 
+0

私はjavascriptでリンクするアクセス権がありません。私はHTMLから取り除く必要があります... HTMLは "$ window"オブジェクトを認識しません。これはAngularを行う必要があります。これは角度指示 "ng-click"のためですか? – Serge

+0

あなたはどうやってhtmlでリンクを取得していますが、コントローラではありませんか? –

+0

私はサーバースクリプティングを使用してHTMLを生成します。 – Serge

関連する問題