Angular + Typescript：在控制器类中使用指令类范围变量答案

【问题标题】：Angular + Typescript: Use Directive Class Scope Variable in Controller ClassAngular + Typescript：在控制器类中使用指令类范围变量
【发布时间】：2015-12-01 16:50:19
【问题描述】：

在弄清楚 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。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript angularjs scope angular-directive angular-controller

【解决方案1】：

您应该能够使用bindToController: true 完成您正在尝试做的事情。

此功能记录在 $compile documentation 中，因此不容易找到，但它可以满足您的需求。

当隔离范围用于组件时（见上文），并使用controllerAs，bindToController: true 将允许组件将其属性绑定到控制器，而不是绑定到范围。实例化控制器时，隔离作用域绑定的初始值已经可用。

【讨论】：

非常感谢！就是这样！一旦我设置了那个标志，我的控制器 obj 就有了价值，我可以在我的控制器的其余部分使用它！