在导航到URL之前更新AngularJS中的href

时间:2017-05-25 09:09:44

标签: angularjs angularjs-ng-click angularjs-ng-href

在AngularJS应用程序中,我有以下代码:

<a target="_blank" ng-href="{{someProperty.href}}" ng-click="someMethod($event)">Hello!</a>

现在,someMethod()someProperty属于同一服务。

最初,someProperty.href具有默认值。

我需要做的是,当用户点击链接时,会执行一些计算并someProperty.href获取新值。这个新值需要反映在ng-href中,用户应该重定向到新的href。

4 个答案:

答案 0 :(得分:1)

尝试重建它似乎有效,点击该链接会打开一个带有新网址的新标签。

https://plnkr.co/edit/gy4eIKn02uF0S8dLGNx2?p=preview

<a target="_blank" ng-href="{{someService.someProperty.href}}" ng-click="someService.someMethod()">
    Hello!
    <br/>
    {{someService.someProperty.href}}
</a>

答案 1 :(得分:1)

您可以像下面的代码那样执行

DataFrame

在控制器

writer = pd.ExcelWriter('xlfile.xlsx')
for c in df.columns:
    df[c].value_counts(dropna=False).fillna(0).to_excel(writer, sheet_name=c[:30])
writer.save()

在HTML中您可以使用

;(function(angular) {
    angular.module('myApp.directives')
        .directive('myExample', myExample);

    myExample.$inject = ['$timeout'];

    function myExample($timeout) {
        return {
            restrict: 'A',
            scope: {
                myExample: '&',
                ngHref: '='
            },
            link: function(scope, element, attrs) {
                element.on('click', function(event) {
                    event.preventDefault();
                    $timeout(function() {
                        scope.myExample();
                        scope.$apply();
                        var target = attrs.target || '_blank';
                        var url = scope.ngHref;
                        angular.element('<a href="' + url + '" target="' + target + '"></a>')[0].click();
                    });
                });
            }
        };
    }
})(angular);

此处取代ng-click我使用了自定义指令来模拟ng-click但不像ng-click那样

如果父作用域函数是异步的,则在控制器中更改指令和someFunction,如下所示

@Directive

;(function(angular) {
    'use strict';

    angular.module('myApp.controllers').controller('HomeController', HomeController);

    HomeController.$inject = ['$scope'];

    function HomeController($scope) {
        $scope.url = 'http://yahoo.com';
        $scope.someFunction = function() {
            $scope.url = 'http://google.com';
        };
    }
})(angular);

@Controller

<div ng-controller="HomeController">
    <a ng-href="url" my-example="someFunction()" target="_blank">Click me to redirect</a>
</div>

这里我只是模拟了异步,它也可能是你的http调用

答案 2 :(得分:0)

确保点击后更新href标签中的值。尝试调试ng-click功能。根据官方documentation

  

在href属性中使用{{hash}}之类的AngularJS标记会使用户在AngularJS有机会用{{hash}}标记替换其值之前单击它时,链接将转到错误的URL。在AngularJS替换标记之前,链接将被破坏并且很可能返回404错误。 ngHref指令解决了这个问题。

在您的情况下,我认为旧链接没有使用模型的新值进行更新。因此,重定向到旧链接。

答案 3 :(得分:0)

尝试在ui-sref或ng-href上调用一个函数,该函数将返回您要重定向的状态名称。像这样的东西

HTML:

<a  ui-href="{{GetUpdatedHref()}}" >Hello!</a>

controller.js

 $scope.GetUpdatedHref = function(){
    //perform your http call while it's being processed show a loader then finally return the desired state (page location)
return "main.home"
}

如果这不起作用,请使用ng-click代替ui-sref,然后在函数内使用$ state.go(&#34; main.home&#34;)。

希望这可以解决您的问题。