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

【问题标题】：Scope function only called once, then looses binding范围函数只调用一次，然后失去绑定
【发布时间】：2015-01-15 11:04:04
【问题描述】：

我有一个 AngularJS 网站，页面上有一个可排序的 jQueryUI。我创建了一个 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 并取消注释上面写着 add anon func 的代码，那么你会发现只有当我以这种方式将我的 $scope 函数硬编码为匿名函数。

但我想指定它应该从 HTML attribute 调用的 $scope 函数。

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

【问题讨论】：

标签： angularjs jquery-ui binding angularjs-scope

【解决方案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

【讨论】：