angularjs + ui.router：指令控制器和鏈路功能

我有一個簡單的指令external-link導致它被放置在一個單獨的窗口，而不是當前angularjs + ui.router：指令控制器和鏈路功能

<a app-external-link href="http://example.com">Example</a>

打開URL鏈接之間不同的行爲它像target="_blank"但追蹤使用者在其上

對於這個例子的目的點擊的能力，我刪除了跟蹤功能，因此只需要表現得像在target=_blank屬性

angular.module('app', []) 
.directive('appExternalLink', function ($window) { 
    var link = function (scope, element, attrs) { 
    element.on('click', function (event) { 
     event.preventDefault(); 
     $window.open(attrs.href, '_blank'); 
    }); 
    }; 

    return { 
    scope: true, 
    link: link 
    }; 
});

此實現按預期工作。讓我吃驚的是，在我的第一種方法我用指令的控制器：

angular.module('app', []) 
.directive('appExternalLink', function ($window) { 
    var controller = function ($element, $attrs) { 
    $element.on('click', function (event) { 
     event.preventDefault(); 
     $window.open($attrs.href, '_blank'); 
    }); 
    }; 

    return { 
    scope: true, 
    controller: controller 
    }; 
});

我不明白爲什麼（因此這個問題）的指令控制器例如鏈接在新的窗口，但成功打開它也改變當前視圖到新的URL

這是因爲如果event.preventDefault()什麼也不做在這種情況下

爲什麼發生這種情況的任何想法？

更新：

當指令與ui-sref

<a app-external-link ui-sref="foo">Example</a>

Plunk here

來源

2016-04-18 Pau Fracés

什麼版本的角？ – CShark

我想知道，因爲我不能刪除'preventDefault'而無法重現您的問題。另外，如果你讓'href'爲空，並且只需將URL從一個不同的屬性傳遞給你的指令，那麼你甚至不必使用'preventDefault'，因爲[angular處理這個]（https://docs.angularjs.org/ api/ng/directive/a），因爲它「修改html標記的默認行爲，以便在href屬性爲空時阻止默認操作」 – CShark

@CShark我正在使用版本1.5.3我可以我不會在笨重地重現它，但我會在我的項目中做。所以我需要仔細研究這個問題。替代屬性方法也是一個好主意。謝謝！ –

使用我有2個可能的解決方案的問題只發生。

使用event.stopImmediatePropagation()與event.preventDefault()在controller單擊處理程序從變化中停止當前頁面的URL組合。

演示：http://plnkr.co/edit/6Qi8NcWMmOvC4R3ZAqsf?p=info
ui-sref確實與target="_blank"工作了，所以有你的指令，只是添加屬性元素，然後做任何你想要在你的點擊處理程序做的，甚至無需擔心處理事件或使用window.open。
```
element.attr('target', '_blank'); 
element.on('click', function (event) { 
    //can track clicks or do whatever you want here 
    console.log(attrs.href + ' opened in new tab.'); 
}); 
```
演示：http://plnkr.co/edit/brvftLiqXLznS6IWNmVA?p=info

我喜歡，因爲我列出，因爲它是較少的代碼，它可以讓angular和ui-router分別從做好自己的工作，你想是什麼原因（而不是必須重複某些邏輯）。另外，我還沒有真正測試過這麼多，它可能會影響我還沒有看到的其他東西。它似乎工作，但如果你喜歡這樣做。

來源

2016-04-19 22:10:55 CShark

**方法2 **清潔並解決問題。謝謝！ –

angularjs + ui.router：指令控制器和鏈路功能

回答

相關問題