Html 无法使用angularjs设置双向绑定

这是我父亲

(function (app) {
    app.component('voiceFormComponent', {
        templateUrl: 'partials/voice-form.html',
        controller: ['$state', '$stateParams', '$http', 'updateService', 'uploadService', 'countriesService', 'flagsService',
            function ($state, $stateParams, $http, updateService, uploadService, countriesService, flagsService) {

                var self = this;
                console.log("in voice prompt component");

                self.filesToUpload = [];


                self.submit = function () {
                    if (self.filesToUpload.length > 0) {
                            self.uploadFiles();
                    }
                ...

及其html：

                            <!--upload files-->
                            <upload-files-component voice-id="$ctrl.voice.id" files-to-upload="$ctrl.filesToUpload" has-files="$ctrl.hasFiles"></upload-files-component>
                        </div>

为什么子组件中填充了

self.filesToUpload

(function (app) {
    app.component('voiceFormComponent', {
        templateUrl: 'partials/voice-form.html',
        controller: ['$state', '$stateParams', '$http', 'updateService', 'uploadService', 'countriesService', 'flagsService',
            function ($state, $stateParams, $http, updateService, uploadService, countriesService, flagsService) {

                var self = this;
                console.log("in voice prompt component");

                self.filesToUpload = [];


                self.submit = function () {
                    if (self.filesToUpload.length > 0) {
                            self.uploadFiles();
                    }
                ...

但是父组件中的self.filesToUpload.length==0

(function (app) {
    app.component('voiceFormComponent', {
        templateUrl: 'partials/voice-form.html',
        controller: ['$state', '$stateParams', '$http', 'updateService', 'uploadService', 'countriesService', 'flagsService',
            function ($state, $stateParams, $http, updateService, uploadService, countriesService, flagsService) {

                var self = this;
                console.log("in voice prompt component");

                self.filesToUpload = [];


                self.submit = function () {
                    if (self.filesToUpload.length > 0) {
                            self.uploadFiles();
                    }
                ...

---

为什么会这样？

首先，为了避免这些问题，只需修改子对象中的对象，而不创建新对象。对于数组，只需将length设置为0并添加新元素

什么是“=”？您知道这是同一个对象，所以有

chil.property

和

parent.property

指向同一个对象

现在你说

chil.property=anotherObject

。Angular仍然是所有javascript，因此无法修改

parent.property

。现在这两点是不同的物体

现在，当运行

$digest

时，这将被修复，它们将指向新对象。演示：

child value: new
parent value: initial
parent value after digest: new