如何使用ng-click进行重定向

Question

如何使用ng-click进行重定向

11

我正在尝试构建一个超级简单的AngularJS应用程序，用于接受两个文本框中的凭据，然后使用双向绑定来在单击按钮时重定向到包含这两个变量的URL。

我的问题是，我可以使其在简单情况下工作。

<a href=...>

(或者可能是ng-href=...)但不知道为什么，无论我做什么，我都无法使用

a标签进行重定向。

<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>

通过将文本的类别设置为我想要用于按钮的类别，文本看起来就像一个按钮一样。

- Red-Beard

3

你无法让它工作，因为$location不在范围内，因此在视图中无法访问。 - kamituel

是否可以使用其他窗口或位置的变体？很奇怪，因为我可以使用普通的JavaScript通过onClick进行重定向，但这不会给我双向绑定。所以将它改为ng-click时我期望它的行为相同，但有双向绑定，但实际上它什么也不做。 - Red-Beard

如果可能的话，我想在页面上完成它。这只是糟糕的设计。在您的控制器中使用一个函数！ - dirkk

是的，句号后面只应该有一个空格。但是如果我加了两个空格，在申请职位时除非我申请的职位特别在意，否则并不重要。同样，我理解“最佳实践”会将原本应该是单页面、无控制器的 AngularJS 示例变成一个多文件、多文件夹的设置，并将所有内容封装在通用函数中等等。我的问题是，为什么在这种情况下 onClick 和 ng-click 表现不同？双向绑定可以在没有控制器的情况下工作，window.open 可以在没有 angular 的情况下工作，为什么两者不能一起使用？ - Red-Beard

在{{username}}和{{password}}设置之前，应禁用该链接。对于像这样的动态URL，最好使用ng-href(https://docs.angularjs.org/api/ng/directive/ngHref)进行实践，尽管在这种情况下可能并不重要，因为它似乎取决于用户输入，所以它对你没有帮助（即你需要启用/禁用）。 - craigb

4个回答

11

需要注意以下几点：

在Angular表达式中引用窗口是被禁止的！因此，在内联的ng-click表达式中尝试使用$window.location.href = '/url'将无法工作。
$location不会自动地暴露到你的作用域中，你需要先将它注入到控制器中，然后再将其暴露给视图。

.controller('LoginCtrl', function($scope, $location) { $scope.$loc = $location; })
值得注意的是，$location.path()和$location.url()不会重定向到新页面，它们用于路由，以便路由回调函数/观察程序可以执行相应操作。$location服务仅允许您更改URL；它不允许重新加载页面。
最好的方法（也是我认为符合Angular思想的方法）是在控制器中添加一个绑定到作用域的方法。当您需要更改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('/')">回家！没有人爱你</button>

注意：上述方法将需要你在控制器中注入$location和$window。

- Shannon Hochkins

6

您也可以使用ng-href。

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

- user2909250

当href与button元素不兼容时，你是如何让它工作的？ - Kerry Johnson

0

这肯定会起作用

$scope.loadSchedules = function () {

        window.location.href = '/Admin/Admin/DoctorsSchedule';
        
    };


**Define a function inside "ng-click" attribute**

<button type="button" class="btn btn-primary success" ng-click="loadSchedules()">Ok</button>

- Deekshith Shekar

提问者提到：“如果我在控制器中调用一个函数，我就可以让它工作。”他正在寻找其他方法。 - Zam Abdul Vahid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- craigb · Accepted Answer

在您的控制器上放置一个方法来进行重定向，并使其从按钮的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;
})

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