Question

我有一个laravel应用程序会吐出默认分页，但它会为每个链接添加“page”并忽略查询字符串中当前的内容。这不是一个拉丁问题，只是想解释这个问题。

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

我听到很多在DOM中做任何事情最好在angularJS中避免，因为它不是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）。

Answer 1

在AngularJS中使用jQuery没什么问题，只需要让AngularJS知道它是否需要做任何事情。这可能就像jQuery事件处理程序（或任何非角度构造）的回调中的$scope.$apply()一样简单，或者更复杂的东西，比如在范围的上下文中编译DOM更改。

在您的情况下，角度需要知道＆＃34;正确的链接＆＃34;？如果没有，您可以将代码包装在属性指令中。

以下是说明性的，我还没有对其进行测试

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

Answer 2

我认为你可以使用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;
                  })
              }

          }

    })

AngularJS后期处理链接

2 个答案: