javascript - 如何使用 ng-click 重定向

Question

我正在尝试构建的 super 简单的 AngularJS 应用程序，接受两个文本框中的凭据，然后使用双向绑定(bind)在单击按钮时重定向到一个包含两个变量的 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>

如果我在 Controller 中调用一个函数，我可以让它工作，但这是一件非常简单的事情，如果可能的话，我想在页面上完成它。

此外，作为一个附带问题，登录这样的网站有哪些安全问题？

**编辑:让我感到困惑的部分是，这有效(只是没有双向绑定(bind)工作):

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

我希望将 onClick 更改为 ng-click 会给我相同的行为，但具有双向绑定(bind)。

**重新编辑/解决方案好吧，我终于找到了一个可行的解决方案。

如上所述，我不知道为什么 Button 标签不能提供这种行为，但这是工作代码。

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

通过为它提供与我打算用于按钮的相同的类，文本看起来就像一个按钮，完全一样。

Answer 1

在您的 Controller 上放置一个方法来执行重定向，并在您的按钮上通过 ng-click 调用该方法。

标记:

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

Controller :

.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;
})

我仍然会在作用域上使用调用方法。