具有功能绑定的角度指令范围评估('&')

时间:2014-06-04 13:18:59

标签: javascript angularjs angularjs-directive angularjs-scope

我们看到函数如何绑定到指令范围有一些意想不到的行为。 Here is a jsbin example

总结一下 - 我们有一个带有范围对象的指令如下:

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 - 返回&#34; add-scope-directive - fn&#34;。

我们现在希望看到fn(&#34; add-scope-directive - fn&#34;)的结果在整个指令中是相同的。然而,子指令&sub; dir&#39;的链接功能的结果。当它没有在转发器中使用时是不同的 - 而是它来自MainCtrl上的函数。

问题是 - 我们的期望是否正确,这是一个错误吗?或者我们应该期待我们在这里看到的内容,如果是这样,为什么呢?

1 个答案:

答案 0 :(得分:0)

不是一个合适的解决方案,但解决方法可能是将超时放入sub-dir的link函数中,如下所示:

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