javascript - angularjs 中没有 ng-model 是否可以在 Controller 之间共享值？

Question

我试图在 2 个 Controller 之间共享一个服务值，但双向数据绑定(bind)不起作用。是否可以在不使用 ng-model 的情况下这样做？

// script.js
angular.module("MyApp")
    .factory("ValuesStore", function() {

        var service = {};

        service.visible = true;
        service.toggle = toggle;

        function toggle() {
            console.log(service.visible);
            service.visible = !service.visible;
        }

        return service;
    });

function FirstController($scope, ValuesStore) {
    $scope.visible = ValuesStore.visible;

    $scope.toggle = ValuesStore.toggle;
}

function SecondController($scope, ValuesStore) {
    $scope.visible = ValuesStore.visible;
}

<!-- template -->
<div ng-controller="FirstController">
    {{ visible }}
</div>

<div ng-controller="SecondController">
    {{ visible }}
</div>

我见过的所有示例都使用带有 ng-model 的输入元素。也许我应该使用观察者或广播来做到这一点。

Answer 1

在您的 Controller 中，直接绑定(bind)到服务。

function FirstController($scope, ValuesStore) {
    $scope.ValuesStore = ValuesStore;
}

function SecondController($scope, ValuesStore) {
    $scope.ValuesStore = ValuesStore;
}

然后在您看来，您可以通过

访问该属性

{{ ValuesStore.visible }}

一旦触发 ValuesStore.Toggle()，它们就会自动更新。

但正如@devqon 所说，也许您不想在 Controller 中涉及整个服务，$watch 可以帮助您。

在您的第一个 Controller 中，观看 visible

$scope.visible = ValuesStore.visible;

$scope.$watch('visible', function (newValue, oldValue) {
    if (newValue !== oldValue) {
        ValueStore.visible = newValue;
    }
});

在你的第二个 Controller 中，留意 ValuesStore.visible

$scope.visible = ValuesStore.visible;

$scope.$watch(ValueStore.visible, function (newValue, oldValue) {
    if (newValue !== oldValue) {
        ValueStore.visible = newValue;
    }
});