通用功能包装成指令

9 浏览
0 Comments

通用功能包装成指令

我正在尝试编写一个指令，能够在应用程序的任意位置对任意数据进行排序。假设我有以下代码（基于实际代码，为简单起见只显示排序函数和一些复杂性）：\n

angular.module('test', []);
angular.module('test').controller('wrapperController',['$scope', function(scope){
  scope.data = {}
  scope.data.rows = [{name: 'foo'}, {name: 'bar'}, {name: 'bazz'}]
  scope.data.columns = [{name: 'Name', sortBy: 'name'}]
}]);
angular.module('test').directive('grid', [function(){
  return {
    restrict: 'A',
    templateUrl: 'grid.html',
    scope: {
      grid: '='
    }
  }
}]);
angular.module('test').directive('sortable', [function(){
  return {
    restrict: 'A',
    scope: {
      sortableCollection: '=',
      sortableKey: '&'
    },
    compile: function(el, at, transclude){
      if(at['ng-click']){
        el.attr('ng-click', el.attr('ng-click')+';sortFunction()')
      }else{
        el.attr('ng-click', 'sortFunction();')
      }
      return(function(scope, element, attrs){
        scope.sortableKey = scope.sortableKey();
        scope.sortFunction = function(){
          alert(" I AM IN UR FUCNTION SORTING UR D00dZ!!1");
        }
      });
    }
  }
}]);

\n还有以下HTML代码：\n

\n以及（在`grid.html`中）：\n


  
    

      
        {{column.name}}
      
    

  
  
    

      
        {{row.name}}

\n检查HTML代码显示`ng-click`正确填充，但是当点击标题时，函数从未触发。为什么会这样？有没有办法实现这种行为？\nplunr：[http://plnkr.co/edit/aXjMqhZxI7ME8wQJOLpA?p=preview](http://plnkr.co/edit/aXjMqhZxI7ME8wQJOLpA?p=preview)

0

2 答案

0 Comments

问题的出现原因是，网格指令需要在其范围内创建一个控制对象，并将其传递给可排序指令。然而，由于作用域的特性，无法直接在指令之间共享控制对象。

为了解决这个问题，可以通过在网格指令中创建一个控制对象，并通过属性传递给可排序指令。可排序指令会将排序函数添加到控制对象中。最后，在网格模板中，可以通过控制对象的属性来访问排序函数。

以下是解决方法的代码示例：

网格指令中的代码：

link: function(scope, element, attrs) {
  scope.sorter = {};
}

网格模板中的代码：

可排序指令中的代码：

scope: {
  ....
  sortControl: '='
},
link: function(scope, element, attr) {
  if (scope.sortControl) {
    scope.sortControl = {
      sortFunction: function() {
        alert(" I AM IN UR FUCNTION SORTING UR D00dZ!!1");
      }
    };
  } 
}

网格模板中的代码：

通过以上解决方法，可以实现网格指令和可排序指令之间的通信，并在网格模板中调用控制对象中的排序函数。

以上是一个可运行的示例，您可以通过此链接查看演示效果。这种方法非常实用，可以在以后的开发中参考使用。感谢原作者提供的解决方案！

0
0 Comments

问题的原因是在Angular应用启动时，它会扫描DOM以查找指令，并调用它们的编译函数。因此，在编译函数中添加`ng-click`指令已经太晚了。另外，在指令中添加`ng-click`也没有意义，因为您想要添加的是一个点击事件的监听器。

解决方法是在指令的链接函数中添加一个点击事件的监听器。代码示例如下：

link: function(scope, element, attrs) {
  scope.sortableKey = scope.sortableKey();
  element.on('click', function() {
    alert(" I AM IN UR FUCNTION SORTING UR D00dZ!!1");
    // 在修改模型后调用$scope.$apply();
  });
}

这样，当元素被点击时，将会弹出一个警告框。如果您修改了模型数据，需要在修改后调用`$scope.$apply()`来通知Angular更新视图。

0