我们有一个页面,用于显示两个带有两组数据的ui-grid。我们设置了一个通用的基本控制器来处理网格选项的设置,过滤等,然后从该基类派生出两个控制器,每个网格一个。我们还为每个网格创建了一个指令。
该指令正在呈现:
namespace Directives {
'use strict';
export class SecondGridDirective implements ng.IDirective {
static $inject: Array<string> = [];
static instance(): ng.IDirective {
return new SecondGridDirective();
}
scope: IGridDirectiveScope = { options: '=' };
templateUrl: string = 'app/areas/blah/views/gridTemplate.html';
restrict: string = 'E';
controller: typeof Controllers.SecondGridController = Controllers.SecondGridController;
controllerAs: string = 'vm';
bindToController: boolean = true;
transclude: boolean = true;
}
angular
.module('Directives', [])
.directive('secondGridDirective', SecondGridDirective.instance);
}
此指令不呈现:
namespace Directives {
'use strict';
export class FirstGridDirective implements ng.IDirective {
static $inject: Array<string> = [];
static instance(): ng.IDirective {
return new FirstGridDirective();
}
scope: IGridDirectiveScope = { options: '=' };
templateUrl: string = 'app/areas/blah/views/gridTemplate.html';
restrict: string = 'E';
controller: typeof Controllers.FirstGridController = Controllers.FirstGridController;
controllerAs: string = 'vm';
bindToController: boolean = true;
transclude: boolean = true;
}
angular
.module('Directives', [])
.directive('firstGridDirective', FirstGridDirective.instance);
}
最后,他们插入的html:
<div class="container-fluid" ng-controller="SecondGridController as ctrl">
<second-grid-directive options="ctrl.gridOptions"></second-grid-directive>
</div>
<div class="container-fluid" ng-controller="FirstGridController as ctrl">
<first-grid-directive options="ctrl.gridOptions"></first-grid-directive>
</div>
我们遇到的问题是第二个网格控制器呈现,但第一个网格控制器没有。我们尝试过评论一个或另一个,在页面上交换位置,重命名控制器/指令,甚至将工作指令和控制器中的代码复制到非工作指令中。没有任何效果。我们在调试中注意到两个控制器上的构造函数都会触发,但是我们传递给angular.directive函数的instance()方法只触发secondGridDirective。