如何使用ng-click重定向

Question

我正在尝试构建超级简单的AngularJS应用程序,将凭据接受到两个文本框中,然后使用双向绑定在按钮上重定向单击到包含其中两个变量的URL.

我的问题是,我可以让它变得简单

<a href=...>

(或者可能是ng-href = ...)但出于某种原因,无论我做什么,我都无法使用

<button>

我尝试了很多变化,但这就是我想要做的

<button ng-click="$location.path('http://example.com/login.jsp?un={{username}}&pw={{password}}')" class="btn btn-lg btn-warning">Log In!</button>

如果我在控制器中调用一个函数,我可以使它工作,但这是一件非常简单的事情,如果可能的话,我想在页面上完成它.

另外,作为一个侧面问题,登录这样的网站有哪些安全问题？

**编辑:困扰我的部分是,这是有效的(只是没有双向绑定工作):

<button onClick="window.open('http://www.example.com/{{username}}');">

我希望将onClick更改为ng-click会给我相同的行为,但是使用双向绑定.

**重新编辑/解决方案好吧,所以我终于得到了一个可行的解决方案.

我不知道为什么Button标签不会产生这种行为,如上所述,但这是工作代码.

<a href="https://www.example.com/login.jsp?un={{username}}&pw={{password}}" class="btn btn-lg btn-warning">Log In!</a>

通过给它提供与我打算用于按钮相同的类,文本看起来像一个按钮,只是相同.

Answer 1

在您的控制器上放置一个方法来执行重定向,并ng-click在您的按钮上设置该调用的表单.

标记:

<button ng-click="goLogin()">Log in</button>

控制器:

.controller('LoginCtrl', function($scope, $location) {
    $scope.form = {
        username: null,
        password: null
    };

    $scope.goLogin = function() {
        $location.url('http://test.com/login.jsp?un='+ $scope.form.username +'&pw="+ $scope.form.password);
    };
})

还要注意要拨打$location.url()不path()

要么...

添加$location到您的范围并致电url({{newUrl}}):

$controller('MyCtrl', function($scope, $location) {
    $scope.$location = $location;
})

我仍然会在范围内使用调用方法.

Answer 2

这里有几点需要注意:

1. 不允许在Angular表达式中引用Window!,因此尝试$window.location.href = '/url'在内联ng-click表达式上使用将不起作用.

2. $location 如果没有自动暴露给您的作用域,您需要先将其公开给控制器,然后再将其注入到视图范围内.

   .controller('LoginCtrl',function($ scope,$ location){$ scope.$ loc = $ location;})

3. 值得注意的是$location.path()&$location.url()不会将您重定向到新页面,这用于路由,以便路由回调/观察者可以做到这一点.$ location服务允许您仅更改URL; 它不允许您重新加载页面.

4. 最好的(也是角度方式imo)是在控制器中为范围添加方法.当您需要更改URL并重新加载页面或导航到其他页面时,请使用较低级别的API : $window.location.href.

使用绑定到控制器的方法:

$scope.redirect = function(url, refresh) {
    if(refresh || $scope.$$phase) {
        $window.location.href = url;
    } else {
        $location.path(url);
        $scope.$apply();
    }
}

然后从ng-click表达式中调用您的方法:

<button ng-click="redirect('/')">GO HOME! NO BODY LOVES YOU</button>

注意:上述方法将要求您将两个$location&注入$window控制器.

Answer 3

您也可以使用ng-href。

<button ng-href="http://example.com/login.jsp?un={{username}}&pw={{password}}" class="btn btn-lg btn-warning">Log In!</button>