Question

编译/链接过程的哪个阶段是绑定到父（控制器）范围的指令的隔离范围内的变量？我有一个应用程序，我想在加载视图后自动调用指令api。

我理解范围绑定happens in the directive linking phase，因此在后连接时，在隔离范围上公开的变量应该在父范围内可用。

但是，我发现事实并非如此，如下面的代码所示（plunker here）。

//plunker code
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.buttonClick = function() {
    console.log("In buttonClick function, call is: " + this.call);
    this.call();
  }

  $scope.$on("LinkComplete", function(event) {
    console.log("In LinkComplete, call is: " + event.currentScope.call);
    //event.currentScope.call();
  });

  console.log("In Constructor, call is: " + this.call);
})
.directive('myDirective', function(){
  return {
    scope: {
      myMethod: '='
    },
    controller: function ($scope) {
      $scope.myMethod = function() {
        alert("method called");
      };
    },
    link: function postLink(scope) 
    {
        scope.$emit("LinkComplete");
    }
  };
});

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div my-directive my-method="call"></div>
  <button ng-click="buttonClick()">Call</button>
</body>

请注意，代码在视图初始化期间尝试访问链接变量（指向指令控制器上的方法）两次，并且在两种情况下，变量都是未定义的。我不希望变量在主控制器构造函数中可用，但我希望它在后链接事件处理程序中可用。加载视图后，绑定变量可用（单击“呼叫”按钮进行见证）。

如何从控制器访问绑定变量，而无需用户点击按钮等？

Answer 1

这是一个很好的问题，当你看到像'x is y in z stage'这样的词时你需要注意准确性，总是深入研究源代码来证明它。

你的plunker正在使用v1.2.27，结帐此行： https://github.com/angular/angular.js/blob/v1.2.27/src/ng/compile.js#L1492

isolateScope.$watch(function parentValueWatch() {
  var parentValue = parentGet(scope);
  if (!compare(parentValue, isolateScope[scopeName])) {
    // we are out of sync and need to copy
    if (!compare(parentValue, lastValue)) {
      // parent changed and it has precedence
      isolateScope[scopeName] = parentValue;
    } else {
      // if the parent can be assigned then do so
      parentSet(scope, parentValue = isolateScope[scopeName]);
    }
  }
  return lastValue = parentValue;
}, null, parentGet.literal);

这将在下一个$摘要周期中进行评估，然后将分配parentScope.call。同时，postLink函数在其下方同步执行： https://github.com/angular/angular.js/blob/v1.2.27/src/ng/compile.js#L1575

// POSTLINKING
for (i = postLinkFns.length - 1; i >= 0; i--) {
  try {
    linkFn = postLinkFns[i];
    linkFn(linkFn.isolateScope ? isolateScope : scope, $element, attrs,
      linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers), transcludeFn);
  } catch (e) {
    $exceptionHandler(e, startingTag($element));
  }
}

执行postLink后，控制器收到了事件，但parentScope.call尚未通过$ digest初始化。

因此，如果你添加一个setTimeout进行检查，它看起来就像你想要的那样：

$scope.$on("LinkComplete", function(event) {
    setTimeout(function () {
        console.log("In LinkComplete, call is: " + event.currentScope.call);
        //event.currentScope.call();
    });
});

何时隔离范围绑定到AngularJs中的父范围？

1 个答案: