Angular UpgradeComponent找不到$ scope [英] Angular UpgradeComponent cannot find $scope

问题描述

我有一个混合的angular-cli，大致遵循Victor Savkin的延迟加载的AngularJS指南.AngularJS被引导到LazyLoaded Angular模块的构造函数中.我的应用程序和指南之间的主要区别在于，我试图将< ui-view> 指令包装在某些Angular组件中.由于布局的结构方式，< ui-view> 元素在引导AngularJS时将不可用，并且可以随时添加或删除.

I have a hybrid angular-cli that roughly follows Victor Savkin's Lazy Loaded AngularJS guide. AngularJS is bootstraped in the constructor of a LazyLoaded Angular module. The main difference between my app and the guide is that I am trying to wrap the <ui-view> directive inside of some Angular components. Because of how my layout is structured the <ui-view> element will not be available when AngularJS is bootstrapped and may be added or removed at any time.

import { Component, Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
import * as angular from 'angular';

@Component({
  template: `
  <layout-wrapper>
    <my-toolbar></my-toolbar>
    <layout-contents>
      <ng2-ui-view>
        <h3 class="text-center">AngularJS page not loaded</h3>
      </ng2-ui-view>
    </layout-contents>
  </layout-wrapper>
  `,
})
export class LegacyOutputComponent { }

@Directive({selector: 'ng2-ui-view'})
export class UpgradedUiViewComponent extends UpgradeComponent {
  constructor(ref: ElementRef, inj: Injector) {
    super('uiViewWrapper', ref, inj);
  }
}

export const routerPatchModule = 'arcs.router.patch';

// We need to define a wrapper for ui-view because we can only upgrade
// components with only one definition. uiView cannot be automatically
// upgraded because its definition is too complex
angular.module(routerPatchModule, ['ui.router'])
.component('uiViewWrapper', { template: '<ui-view></ui-view>'})

当我运行代码时，出现错误:没有$ scope提供程序！错误.检查堆栈跟踪信息，我可以看到它是在 UpgradeComponent 超类中抛出的.注入器尝试获取 $ scope 和

When I run the code a Error: No provider for $scope! error is thrown. Checking the stack trace I can see that it is thrown in the UpgradeComponent super class. The injector tries to get $scope and

推荐答案

此设置无效.AngularJS需要能够在应用程序的根目录中加载，以便正确定义范围.

This setup will not work. AngularJS needs to be able to load in the root of your application in order for the scope to be defined correctly.

解决此问题的更好方法是在应用程序的根目录中使用< div ui-view> 指令(如升级指南中所述)，然后将布局组件从将Angular转换为AngularJS即可包装您的内容.

A better way to approach this problem is to use the <div ui-view> directive in the root of your application (as in the upgrade guide) and then to downgrade a layout component from Angular into AngularJS to wrap your content.

这篇关于Angular UpgradeComponent找不到$ scope的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！