Javascript AngularJs没有'；t呈现服务上更改的数据

我有一个服务

MediaService

，我在组件中更改它的数据。

MediaService

数据绑定到另一个组件，当我从第一个组件更改数据时，它不会在第二个组件HTML上呈现

MediaService

angular
.module('commons')
.service('MediaService', function () {

    this.selectedMedia = {}
    this.isPlaying = false

    return this;

})

这是我更改数据的地方

readerMedias

angular
.module("app")
.component("readerMedias", {
    bindings: {
        medias: "="
    },
    templateUrl: "app/reader/components/reader-medias/reader-medias.html",
    controller: function (MediaService) {
        MediaService.selectedMedia.url = "test" // i use a real url
        MediaService.selectedMedia.type = "video" 
        MediaService.isPlaying = true
    }
})

这是我想要更改的组件，正如我所能调试的那样，数据反映在这里，这是可以的，但不是在组件HTML中

阅读器层

angular
.module('app')
.component('readerPlayer', {
    templateUrl: 'app/reader/components/reader-player/reader-player.html',
    controllerAs: '$ctrl',
    controller: function (MediaService, $scope){
        $scope.MediaService = MediaService
        console.log(MediaService)
        return this;
    }
})

readerPlayer HTML

div.playing-media(
    ng-draggable
    ng-init="$ctrl.isFull = true"
    ng-class="{\
        'full-media': $ctrl.isFull, \
        'min-media': !$ctrl.isFull \
    }"
    ng-if="MediaService.isPlaying"
)
    div.playing-head
        div
            span.material-icons.full(
                ng-click="$ctrl.isFull = !$ctrl.isFull"
            ) photo_size_select_large
        span.material-icons.close(
            ng-click="MediaService.isPlaying = false"
        ) clear

    div.content
        video(
            controls
            ng-if="MediaService.selectedMedia.type != audio"
        )
            source(
                ng-src="{{MediaService.selectedMedia.url}}"
                type="video/mp4"
            )

        audio(
            ng-if="MediaService.selectedMedia.type == audio"
        )
            source(
                ng-src="{{MediaService.selectedMedia.url}}"
                type="audio/mp3"
            )

删除服务中的语句：

angular
.module('commons')
.service('MediaService', function () {

    this.selectedMedia = {}
    this.isPlaying = false

    //DELETE the return statement    
    ̶r̶e̶t̶u̶r̶n̶

    //OR

    return this;    
})

如果没有

return

语句，构造函数将自动返回由创建的

this

对象

---

字符串需要引号：

div.content
    video(
        controls
        ng-if="MediaService.selectedMedia.type !=  ̶a̶u̶d̶i̶o̶  ͟'͟a͟u͟d͟i͟o͟'͟ "
    )
        source(
            ng-src="{{MediaService.selectedMedia.url}}"
            type="video/mp4"
        )

    audio(
        ng-if="MediaService.selectedMedia.type ==   ̶a̶u̶d̶i̶o̶  ͟'͟a͟u͟d͟i͟o͟'͟ "
    )
        source(
            ng-src="{{MediaService.selectedMedia.url}}"
            type="audio/mp3"
        )

---

如果没有引号，媒体类型将与未定义的

$scope.audio

进行比较。

您没有附加HTML模板。@Olivier列支敦士提谢谢，我现在确实在您的控制器中对其进行了更改，您为

媒体服务分配了一个字符串。选择了媒体

，但在您的模板中，您将其视为一个对象。该对象来自哪里？在您的服务中，您不返回任何内容。然后你就不给服务打电话了（很明显）。@JCFord my bad当我写问题的时候，现在我编辑了这个问题。我试过了，但没有任何效果