0

在 AngularJS 应用程序中，我有以下代码：

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

现在，someMethod()和someProperty属于同一个服务。

最初，someProperty.href有一个默认值。

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

4

4 回答 4

1

你可以像下面的代码那样做

;(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);

在控制器中

;(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);

在 HTML 中你可以使用 like

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

在这里，我使用了自定义指令而不是 ng-click，它模拟了 ng-click，但不像 ng-click

如果父范围函数是异步的，您可以更改控制器中的指令和 someFunction，如下所示

@指示

;(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();

                    scope.myExample().then(function() {
                        $timeout(function() {
                            scope.$apply();
                            var target = attrs.target || '_blank';
                            var url = scope.ngHref;
                            angular.element('<a href="' + url + '" target="' + target + '"></a>')[0].click();
                        });
                    });
                });
            }
        };
    }
})(angular);

@控制器

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

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

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

    function HomeController($scope, $q) {
        $scope.url = 'http://yahoo.com';
        $scope.someFunction = function() {
            var deferred = $q.defer();
            $scope.url = 'http://google.com';

            deferred.resolve('');
            return deferred.promise;
        };
    }
})(angular);

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

于 2017-05-25T13:43:17.793 回答
1

尝试重建它，它似乎可以工作，单击链接会打开一个带有新 URL 的新选项卡。

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>
于 2017-05-25T13:01:37.170 回答
0

确保单击 href 标记中的值后更新它。尝试调试 ng-click 功能。根据官方文档：

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

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

于 2017-05-25T09:25:41.690 回答
0

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

html:

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

控制器.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("main.home") 。

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

于 2017-05-25T15:10:44.010 回答