Question

我有一个服务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中

readerPlayer

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"
            )

Answer 1

删除服务中的return语句：

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语句，构造函数会自动返回new operator创建的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进行比较。

AngularJs不会在服务

1 个答案: