Angular指令作用域的函数绑定('&')评估

3
我们发现一个函数绑定到指令作用域的方式出现了意外行为。这里是jsbin示例
简要概括一下 - 我们有一个指令,它具有以下作用域对象:
scope: { fn: '&', val: '@' }

该指令将fn的结果显示两次。首先,在模板中评估结果时,我们将其显示出来。然后,在link函数中评估结果时再次显示。
<div><code>fn (&)</code>: {{fn()}}</div>
<div><code>fn result ($scope.result = $scope.fn()) </code>: {{result}}</div>

我们随后在另一个指令中使用这个范围:
app.directive('rootDirective', function() {

  function link($scope, $elem, $attrs) {
    $scope.name = 'directive with scope';
  }
  return {
    scope: 'isolate',
    replace: true,
    restrict: 'E',
    link: link,
    template: [
      '<div add-scope-directive="">',
      '  <div ng-repeat="n in [1]">',
      '    <sub-dir val="{{val}}" fn="fn()" name="{{n}}"></sub-dir>',
      '  </div>',
      '  <sub-dir val="{{val}}" fn="fn()" name="{{name}}"></sub-dir>',
      '<div>'
    ].join('\n')
  };
});

在此指令的根节点上,我们有另一个指令add-scope-directive。在这个指令中,我们定义了fn - 返回"add-scope-directive - fn"。
现在我们期望看到fn("add-scope-directive - fn")的结果在整个指令中保持一致。然而,当子指令'sub-dir'的链接函数在不使用重复器时,其结果不同 - 而是来自MainCtrl上的函数。
问题是 - 我们的期望是否正确,这是一个错误吗?或者我们应该期望在这里看到我们看到的东西,如果是这样,为什么?

2
scope: 'isolate' 是什么? - link
scope: {} @link 相同。在控制器中初始化作用域似乎可以使结果保持一致:示例在这里 - ed.
1个回答

0

这不是一个完美的解决方案,但是可以通过在子目录的链接函数中设置超时来实现解决,如下所示:

setTimeout(function() {
  $scope.result = $scope.fn();
  $scope.$apply();
}, 0);

1
使用Angular的$timeout而不是setTimeout,这样您就不必使用$scope.$apply() - m.e.conroy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接