Question

我的页面上有一个jQueryUI可排序的AngularJS站点。我创建了一个directive来实例化属性中的可排序功能，如下所示：

<ul sortable>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ul>

jQueryUI sortable带有一组events。我希望它在触发stop事件时调用我的自定义函数。所以我这样做：

<ul sortable="{stop: test() }">
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ul>

我的指令使用我在属性中提供的设置初始化sortable插件。 test()函数（在我的$scope中）被调用一次，但似乎失去了它的绑定。

以下是一个示例：plnkr：http://plnkr.co/edit/rTAuMMZXREPNHWmgLGtV?p=preview

如果您使用我的directive并取消注释 添加anon func 的代码，那么您将看到我只能制作当我以匿名函数硬编码我的$scope函数时，它可以工作。

但我想在HTML $scope中指定应调用的attribute函数。

有没有办法让这项工作按我想要的方式进行？

Answer 1

您可以通过传入对象作为参考来实现：

myApp.directive('sortable', [function() {
  return {
    restrict: 'A',
    scope: {
      sortable: '='
    },
    link: function(scope, el, attr) {
      if ($.fn.sortable) {
        el.sortable(scope.sortable);
      }
    }
  };
}]);

这样你可以按名称传递函数：

<ul sortable="{stop: test}">
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ul>

请参阅working plnkr

范围函数只调用一次，然后失去绑定

1 个答案: