Angular 1.5 组件似乎没有注册

Posted 2023-02-23

【中文标题】Angular 1.5 组件似乎没有注册

【英文标题】：Angular 1.5 component not seeming to register

【发布时间】：2017-02-02 23:55:26

【问题描述】：

我目前正在使用 Angular 1.5 的 .component() 方法编写应用程序。我的组件代码如下：

(function () 
  'use strict';

  function controllerFn($state) 

    console.log('controllerFn'); // this logs fine
    this.testVar = 'test me';

    this.onLoadComplete = function () 
      $state.go('main');
      console.log('load completed')
    ;

  

  APP.component('appPreloader', 
    controller: controllerFn,
    controllerAs: 'appPreloader'
  );

());

我的模板代码如下：

<app-preloader class="page-preloader">
      appPreloader.testVar
      <preloader on-complete="appPreloader.onLoadComplete"></preloader>
</app-preloader>

我遇到的问题是 appPreloader 在我看来是空的，例如，appPreloader.testVar 什么也不渲染。

我知道这与 .components() 的隔离范围有关，但我很困惑我应该如何设置它以使一切正常工作。

非常感谢任何建议。

干杯

【参考方案1】：

除非您有template/templateUrl 和component/directive，否则位于directive/component 中的内容将不会与组件上下文一起编译。您应该在 component 内部组件 template 中包含该内部 html，以便使用组件上下文进行编译。

结帐Plunkr Here，在这里你可以看到app-preloader里面你可以访问mainCtrl的变量（上下文）。

如果你可以检查this plunkr，我只是将组件的内部html直接移动到组件template开始工作的属性。

【讨论】：

非常感谢。代表我有点疏忽。所以我是否说这与.directive() 不同，因为.directive() 并不总是需要模板或templateUrl？