使用 $compile 编译指令后，控制器的范围未定义答案

【问题标题】：Controller's scope is undefined after compiling a directive with $compile使用 $compile 编译指令后，控制器的范围未定义
【发布时间】：2019-09-03 17:17:36
【问题描述】：

我正在为此指令编写单元测试：

.directive('readOnlyExplorer', () => ({
  templateUrl:
    'components/experiment-explorer/read-only-explorer.template.html',
  restrict: 'E',
  controller: 'ReadOnlyExplorerController',
  controllerAs: 'vm',
  scope: {
    extensionRegExp: '@?',
    foldersRegExp: '@?',
  },
  bindToController: true
}))

如您所见，我正在使用 controllerAs 和隔离范围将参数传递给指令。控制器是基于类的。

除单元测试外，一切正常。我正在做的是编译指令，然后尝试访问范围。这是单元测试的代码：

element = $compile(
  '<read-only-explorer extension-reg-exp="csv" folders-reg-exp="csv"></read-only-explorer>')($rootScope);
$rootScope.$digest();
const controller = element.scope().vm;
console.log(controller.foldersRegExp) // isolate scope variable, it is undefined
console.log(controller.loadFolder) // controller method, it is undefined

问题是scope() 和vm 都不包含我想要访问的范围。 vm 实际上是未定义的。为什么会这样？我想我没有正确使用$compile。

【问题讨论】：

标签： javascript angularjs unit-testing

【解决方案1】：

控制器在元素的隔离范围内：¹

element = $compile(
  '<read-only-explorer extension-reg-exp="csv" folders-reg-exp="csv"></read-only-explorer>')($rootScope);
$rootScope.$digest();
̶c̶o̶n̶s̶t̶ ̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶ ̶=̶ ̶e̶l̶e̶m̶e̶n̶t̶.̶s̶c̶o̶p̶e̶(̶)̶.̶v̶m̶;̶
const controller = element.isolateScope().vm;
console.log(controller.foldersRegExp) // isolate scope variable
console.log(controller.loadFolder) // controller method

【讨论】：