Question

我有2个控制器通过共享服务进行通信，其中一个控制器监视服务的值以进行更改。但是，它仅在值第二次更改后才起作用 - 这可能是什么原因？

export interface ISharedService {
    value: customObject;
}

class SharedService implements ISharedService {
    value: customObject;
}

export class Controller1 {

    private sharedService : ISharedService;

    constructor(sharedService : ISharedService) {
        this.sharedService = sharedService;
    }

    changeValue(value: customObject) {
        this.sharedService.value = value;
    }

}

export class Controller2 {

    constructor($scope : ng.IScope, sharedService : ISharedService) {
        $scope.$watch(() => sharedService.value, (prev, cur) => {
            if(prev !== cur) {
                alert("WEEEEEE!");
            }
        });
    }

}

当我现在通过调用.changeValue()函数从视图中更改值时，没有任何反应。在调用该函数的第二个时间之后，它突然开始工作。

Answer 1

我实际上拿了你的代码，添加了缺少的部分，它对我有用。

这里是html：

<div ng-app="myModule">
    <div ng-controller="Controller1 as vm">
        <div>changeCounter={{vm.changeCounter}}</div>
    </div>
    <hr>
    <div ng-controller="Controller2 as vm">
        <div>sharedService.value={{vm.sharedService.value}}</div>       
        <button ng-click="vm.onClick()">Click</button>
    </div>
</div>

这里是代码：

class SharedService {
    value: string;
}

class Controller2 {

    private sharedService;
    constructor(private sharedService) {
        this.sharedService = sharedService;
    }

    onClick():void {
        this.sharedService.value = Math.random();   
    } 
}

class Controller1 {
    changeCounter = 0;
    constructor($scope, sharedService) {
        $scope.$watch(() => sharedService.value, (prev, cur) => {
            if(prev !== cur) { 
                this.changeCounter = this.changeCounter + 1;
            }
        });
    }

}

angular.module("myModule", [])
.service("sharedService", SharedService)
.controller("Controller1", Controller1)
.controller("Controller2", Controller2);

$ watch在值第一次更改时不执行

1 个答案: