我可以为同一个控制器使用两个视图吗？

Question

我在开发中有一个简单的应用程序，在两个不同的指令中使用相同的控制器，加载相同的模板，如下所示：

<div ng-controller="IrChartCtrl as vm" class="ir-container" id="{{vm.parameters.ItemId}}">
    <link href="{{vm.widgetScope.baseUrl}}/app/css/rtirchart.css" rel="stylesheet" />
    <div id="content-wrapper" ng-cloak>
        <div class="col-xs-12 slideout-transition">

            {{vm.parameters.ItemId}}
            <!--ng-if="vm.IrImageDate.id === vm.parameters.ItemId"-->
            <h6>
                {{vm.entityName}}  {{vm.IrImageDate.date}}
            </h6>
            <!--ng-if="vm.IrImage.id === vm.parameters.ItemId"-->
            <div class="ir-images">
                <div class="ir-image-wrapper">
                    <img class="ir-image img-responsive"
                         ng-src="{{vm.IrImage.src}}"
                         ng-click="vm.openPopUpImage()"
                         ng-class="{'no-image': vm.IrImage.date.length==0, 'confidence':vm.IrImage.confidence===4}"
                         err-src="{{vm.widgetScope.baseUrl}}/images/img_not_available.png" />
                </div>
                <div class="spinner-wrapper" ng-if="!vm.IrImage.src">
                    <span>
                        <i class="fa fa-spinner fa-pulse loaderImage"></i>Loading...
                    </span>
                </div>
            </div>
            <div class="ir-buttons">
                <div ng-repeat="button in vm.listOfRadioButtons" class="pull-left">
                    <label class="ir-button" ng-click="vm.changeButtonState(button,vm.parameters.ItemId);" ng-class="{'disabled':button.disabled}">
                        <span class="ir-radio-button" id="{{button.id}}"
                              ng-class="{'selected':button.selected}"
                              ng-disabled="button.disabled">
                        </span>
                        {{button.name}}
                    </label>
                </div>
            </div>
        </div>
    </div>

</div>

问题是在我的控制器中我在我的视图中使用了这个var“IrImage”，它返回一个日期，一个路径和一个 id （它引用了图表ID）而不是只为一个图表加载，它被加载。例如，按下单选按钮时会调用下一个方法 changeButtonState ，之后，必须显示该图表的图像，但不能同时显示两个图表。

 changeButtonState(selectedButton: IRadioButton, id: string) {
            if (id === this.parameters.ItemId) {
                this.selectedButton = selectedButton;

                if (!selectedButton.disabled) {
                    selectedButton.selected = !selectedButton.selected;
                    _.forEach(this.listOfRadioButtons, (button, key) => {
                        if (button !== this.selectedButton) {
                            button.selected = false;
                        }
                    });
                } else {
                    this.cancelUpdateQueue();
                }

                if (!selectedButton.disabled) {
                    if (selectedButton.selected) {

                        this.cancelUpdateQueue();

                        this.getCurrentSequences(this.parameters.ItemId);

                        if (this.sequence.name === id) {
                            var findDate = _.findLast(this.sequence.data, (value: Array<any>) => {
                                return value[ValuePoint.timestamp] <= selectedButton.date;
                            });

                            if (findDate !== undefined) {
                                this.selectedButton = selectedButton;
                                this.IrImage = {
                                    id: id,
                                    date: '',
                                    src: '',
                                    confidence: 0
                                };

                                this.getImages(findDate[ValuePoint.imagePath], findDate[ValuePoint.timestamp], findDate[ValuePoint.confidence], id);
                                console.log(this.IrImage);
                            }
                        }
                    } else {
                        this.preventUpdate = false;
                        this.processUpdateSequence();
                    }
                } else {
                    this.cancelUpdateQueue();
                }
            }
        }

有人能帮助我吗？谢谢!!!

更新 指令：

<div class="panel panel-default fill">
    <div class="panel-heading fit-widget-heading">
        <i class="icon-dragger" title="Move Panel">
            <i class="fa fa-ellipsis-v"></i>
            <i class="fa fa-ellipsis-v"></i>
        </i>
        <h3 class="panel-title">{{widget.name}}</h3>
        <div class="panel-heading-tools">
            <a ng-show="filter" ng-click="filter()"><i class="fa fa-filter"></i></a>
            <a class="link-full-screen" title="Pop Out Panel" ng-click="maximize()"><i class="fa fa-external-link"></i></a>
            <a class="link-full-screen" title="Full Screen Panel" ng-click="maximize()"><i class="fa fa-sort fa-full-screen"></i></a>
            <a class="link-close" title="Close Panel" ng-show="close" ng-click="close()"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <ng-include ng-if="overlayVisible" src="'filteroverlay.tpl.html'"></ng-include>
    <div class="panel-body fill fit-widget-body nomargin" ng-if="isContentReady" ng-include="widget.templateUrl">
    </div>
    <div ng-if="ifContentFailure">Error Loading Widget</div>
</div>