2017-09-01 28 views
0

我有一个大致遵循Victor Savkin的Lazy Loaded AngularJS guide的混合角度cli。 AngularJS在LazyLoaded Angular模块的构造函数中引导。我的应用程序和指南的主要区别在于我试图在某些Angular组件中包装<ui-view>指令。由于我的布局结构如何,当AngularJS被引导时,<ui-view>元素将不可用,并且可能随时添加或删除。

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>'}) 

当我运行代码时出现了一个Error: No provider for $scope!错误。检查堆栈跟踪我可以看到它被抛入UpgradeComponent超类。喷油器试图获得$scope

回答

0

此设置不起作用。 AngularJS需要能够加载到应用程序的根目录中,以便正确定义范围。

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