Angular + Typescript:在控制器中使用指令 Class 范围变量 Class
Angular + Typescript: Use Directive Class Scope Variable in Controller Class
在计算 Angular 打字稿时遇到另一个问题;这次是关于控制器的指令。尝试将对象从页面传递到指令,然后在指令的控制器中使用该对象。也许这不是正确的方法,但对我来说似乎很有意义;只是不知道如何访问控制器中的对象。
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 link 传递给控制器 obj,并且我尝试使用 link 函数来使用 ng.IAttributes,但这并没有给出我这个对象;它给了我 ee.obj.
如有任何帮助,我们将不胜感激。
您应该能够使用 bindToController: true
.
完成您正在尝试做的事情
此功能记录在 $compile
documentation 中,因此不容易找到,但它可以满足您的需求。
When an isolate scope is used for a component (see above), and controllerAs
is used, bindToController: true
will allow a component to have its properties bound to the controller, rather than to scope. When the controller is instantiated, the initial values of the isolate scope bindings are already available.
在计算 Angular 打字稿时遇到另一个问题;这次是关于控制器的指令。尝试将对象从页面传递到指令,然后在指令的控制器中使用该对象。也许这不是正确的方法,但对我来说似乎很有意义;只是不知道如何访问控制器中的对象。
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 link 传递给控制器 obj,并且我尝试使用 link 函数来使用 ng.IAttributes,但这并没有给出我这个对象;它给了我 ee.obj.
如有任何帮助,我们将不胜感激。
您应该能够使用 bindToController: true
.
此功能记录在 $compile
documentation 中,因此不容易找到,但它可以满足您的需求。
When an isolate scope is used for a component (see above), and
controllerAs
is used,bindToController: true
will allow a component to have its properties bound to the controller, rather than to scope. When the controller is instantiated, the initial values of the isolate scope bindings are already available.