AngularJS后处理链接

AngularJS post process links

本文关键字：链接 后处理 AngularJS      更新时间：2023-09-26

我有一个laravel应用程序，它会吐出默认的分页，但它会在每个链接中添加"page"，并忽略查询字符串中当前的内容。这不是一个老掉牙的问题，尽管只是想解释一下这个问题。

基本上，我需要为分页链接添加某种处理程序。查询字符串的其余部分是通过我创建指令的控件来处理的，因此它们很容易访问。通过控制器，我可以很容易地创建"正确"的url，但我想找出最好的方法

我听说在angularJS中最好避免使用DOM本身，因为它不是jQuery，那么在angularJS中处理这个问题的最佳实践方法是什么？

在jQuery中，我会这样做。

jQuery('.pagination-wrap a').on('click', function(event) {
   event.preventDefault();
   var link = generateProperLink(jQuery(this).attr('href'));
   window.location.href = link;
});

但是我该如何在角度控制器中做到这一点（减去明显使用的jQuery）。

在AngularJS中使用jQuery没有错，您只需要让AngularJS知道它是否需要做任何事情。这可以简单到jQuery事件处理程序回调中的$scope.$apply()（或任何非角度构造），也可以更复杂，比如在作用域的上下文中编译DOM更改。

在你的情况下，angular需要知道"正确的链接"吗？如果没有，您可以将代码封装在属性指令中。

以下是说明性的，我还没有测试过

(function(app, $) {
    app.directive('fixUrl', fixUrl);
    function fixUrl() {
        return {
            restrict: 'A',
            link: link
        };
        function link(scope, element, attributes) {
            $(element).on('click', function(event) {
                event.preventDefault();
                var link = generateProperLink(element);
                window.location.href = link;
            });
        }
        function generateProperLink(element){
            return $(element).attr('href');
        }
    }
}(angular.module('app'), jQuery));

然后。。。

<a class='pagination' fix-url>Whatever</a>

我认为你可以使用angular.element jqlite，它是jquery的子集，它拥有你可以使用的大多数jquery方法，请参阅https://docs.angularjs.org/api/ng/function/angular.element

您可以对可重复使用的组件使用指令

        <a id="someID" urlUsage><a> 
  //directive 
   App.directive('urlUsage',function(){
       var generateProperLink = function(ele){
             return ele.attr('href');
         }
         return {
             restrict: 'A',
             link:function(scope,ele,attrs) {
                     ele.on('click',function(){
                          event.preventDefault();
                           var link = generateProperLink(ele);
                             window.location.href = link;
                  })
              }
          }
    })
相关文章：