Angular js中一次绑定数据

Question

对于我来说，我有一个 $window 来显示一些数据。每个 $window 都是独立的，我可以在一段时间内拥有多个 $window 但数据不同，当我打开第一个窗口时的问题所有细节都可以，但是一旦我打开下一个窗口并刷新第一个窗口将取第二个窗口的值。

这里的JS打开窗口CockpitController：

(function () {
    angular
        .module("cockpit", ['mm.foundation', 'security', 'message', 'isteven-multi-select', 'idCardSupplierWarn', 'idCardPartWarn', 'idCardSupplierInf'])
        .controller('cockpitController', ['$scope', '$translate', 'serviceCockpit', 'idCardSupplierWarnService', '$window', function ($scope, $translate, serviceCockpit, idCardSupplierWarnService, $window) {

            var urlSuppliersWarning = 'rest/suppliers/warnings';
            var urlSuppliersWarningByRefForDetails = 'rest/suppliers/warnings/supplier/ref/search';


            var self = this;

            serviceCockpit.loadData([urlSuppliersWarning]).then(function (results) {
                self.suppliersWarning = results[0].data;
            });

            this.change = function () {

                if (this.openWindow) {
                    this.openWindow = false;
                }
                else {
                    this.openWindow = true;
                }

            };


            $scope.openNewWindowRef = function (url, params) {
                console.log(params);
                idCardSupplierWarnService.setParam(params);
                console.log(idCardSupplierWarnService);
                var win = $window.open(url, '_blank', 'left=0, top=0, width=1100,height=600,scrollbars=yes, resizable=1');
                win.params = idCardSupplierWarnService.getParams();
            };

            $scope.openNewWindowSupp = function (url, params) {
                idCardSupplierWarnService.setParam(params);
                console.log(idCardSupplierWarnService);
                var win = $window.open(url, '_blank', 'left=0, top=0, width=1100,height=600,scrollbars=yes, resizable=1');
                win.params = idCardSupplierWarnService.getParams();
            };

            this.process = function (items) {

                if (items.origin == 'reference' || items.origin == 'suppliers' || items.origin == 'supplierAccounts' || items.origin == 'supplierAddressCodes' || items.origin == 'reset') {

                    serviceCockpit.loadData([urlSuppliersWarningByRefForDetails], items).then(function (results) {
                        self.suppliersWarningDetails = results[0].data;
                    });
                }

                serviceCockpit.loadData([urlSuppliersWarning], items).then(function (results) {
                    self.suppliersWarning = results[0].data;
                });
            }

        }]);
})();

窗口控制器

(function () {
    angular
        .module("idCardSupplierWarn", ['mm.foundation', 'security', 'message', "isteven-multi-select", 'cockpit'])
        .controller('idCardSupplierWarnController', ['$translate', '$scope', 'serviceCockpit', 'idCardSupplierWarnService', '$window', function ($translate, $scope, serviceCockpit, idCardSupplierWarnService, $window) {


            var urlSupplierWarningByRefDetail = 'rest/suppliers/warnings/supplier/details';

            var self = this;
            console.log(self.params);
            if (typeof self.params == 'undefined') {
                var params = $window.parent.params;
                self.params = params;
                serviceCockpit.loadData([urlSupplierWarningByRefDetail], params).then(function (results) {
                    self.suppliersWarningsList = results[0].data;
                });

            }


        }]);
})();

窗口 HTML：

<div class="main-content" ng-controller="idCardSupplierWarnController as cpt">



    <section class="top-bar" id="main-menu">
        <div class="menu-text"><span class="txt-white"> <center><h5 style="color #FFCC33">{{ 'ID_CARD_SUPPLIER_HOME' | translate }}</h5></center></span>
        </div>
        <div>
            <center>
                <ul class="menu">
                    <ul class="menu">
                        <li ng-class="getClass('/idCardSupplierInf/id/code')"><a href="#/idCardSupplierInf/id/code">{{
                            'ID_CARD_SUPPLIER_HOME_INF' | translate }}</a></li>
                        <li ng-class="getClass('/idCardSupplierGraph')"><a href="#/idCardSupplierGraph" >{{ 'ID_CARD_SUPPLIER_HOME_GRAPH' | translate }}</a></li>
                        <li ng-class="getClass('/idCardSupplierWarn')"><a  href="#/idCardSupplierWarn" >{{ 'ID_CARD_SUPPLIER_HOME_WARN' | translate }}</a></li>

                    </ul>
                </ul>
            </center>
        </div>
    </section>

    <br>
    <div class="row">
        <div class="small-12 large-12 columns maintitle-id">
            <h1>{{ 'ID_CARD_PART_WARN_TITLE_REF' | translate }} {{cpt.params.idSupNum}}.{{cpt.params.codeSuppNum}}</h1>
        </div>
    </div>
    <br/>


    <div class="row">
        <div class="small-12 medium-12 large-12 text-center columns">
            <div class="callout medium shadowd">

                <table>
                    <thead>
                    <tr>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_REF' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_DES' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_GR' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_HOME_TAB1_CODE' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_STOCK' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_CO' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_RE' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_LATE' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_OLD' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_BO' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_VOR' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_QTY1' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_DELAY1' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_CAUSE' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_WARN' | translate }}</th>
                        <th>{{ 'ID_CARD_SUPPLIER_WARN_TAB_ACTION' | translate }}</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="sup in cpt.suppliersWarningsList">

                        <td><a>{{sup.designRefPart}}</a></td>
                        <td>{{sup.labelRefPart}}</td>
                        <td>{{sup.grpes}}</td>
                        <td>{{sup.idSuppNumber}}.{{sup.codeSupp}}</td>
                        <td>{{sup.stock}}</td>
                        <td>{{sup.couvrage}}</td>
                        <td>{{sup.remaingToDeliver}}</td>
                        <td>{{sup.delaySupp}}</td>
                        <td>{{sup.durationDelay}}</td>
                        <td>{{sup.bo}}</td>
                        <td>{{sup.vor}}</td>
                        <td>{{sup.quantity}}</td>
                        <td>{{sup.delaySupp}}</td>
                        <td>{{sup.alfCause}}</td>
                        <td>{{sup.alertMsg}}</td>
                        <td>{{sup.actionMsg}}</td>

                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
















</div>

Answer 1

这是双向数据绑定的特点。使用angular.copy()进行源的深拷贝。然后该变量/范围不会更新其父值。