找出Angular Typescript的另一个问题;这次涉及到控制器的指令。尝试将对象从页面传递给指令,然后在指令的控制器中使用该对象。也许这不是正确的方法,但它似乎对我有意义;只是无法弄清楚如何访问控制器中的对象。
来自页面的HTML:
<div>
<section>
On View: {{ee.obj.name}}
<image-upload obj="ee.obj"></image-upload>
</section>
</div>
指令模板:
<div>
On directive: {{obj.name}}
On controller: {{iuc.obj.name}}
<div class="row">
<div class="col-md-4 text-primary h4">
Add Images
</div>
</div>
<div class="row">
<div class="col-md-3">
<input type="file" multiple ng-model="iuc.imageUploads" ng-change="iuc.uploadImages()" />
</div>
</div>
<div class="row">
<div class="col-md-3 dropzone"></div>
</div>
</div>
指令打字稿:
/// <reference path="../../../scripts/_all.ts" />
module ObjConfig {
'use strict'
export class ImageUpload implements ng.IDirective {
static instance(): ng.IDirective {
return new ImageUpload();
}
restrict = 'E';
replace = true;
templateUrl = '../../../../App/AppConfig/Views/Directives/ImageUpload.html';
scope = {
obj: '='
};
controller = imageUploadCtrl;
controllerAs = 'iuc';
}
export class imageUploadCtrl {
obj: OBJBase;
imageUploads: OBJImage[];
constructor() {
}
uploadImages() {
//THIS IS WHERE I WANT TO ACCESS OBJ
//this.imageUploads.forEach((iu) => { this.obj.images.push(iu); });
}
}
angular.module('ObjConfig').directive('imageUpload', ImageUpload.instance);
}
当我在方法中使用“this.obj”时,它返回为未定义,因此显然控制器“obj”不会自动连接到指令“obj”。页面上的ee.obj.name显示值,指令模板顶部的obj.name显示值,但iuc.obj.name不显示值。所以我一直试图找到一种方法将指令obj链接到控制器obj,我尝试使用链接函数来使用ng.IAttributes,但这并没有给我这个对象;它给了我ee.obj。
非常感谢任何帮助。
答案 0 :(得分:2)
您应该能够使用bindToController: true
完成您要执行的操作。
$compile
documentation中记录了此功能,因此不容易找到,但它可以满足您的需求。
当隔离范围用于组件(参见上文),并且使用
select * from table
时,json
将允许组件将其属性绑定到控制器,而不是范围。实例化控制器时,隔离范围绑定的初始值已经可用。