在angularjs中没有ng-model的控制器之间可以共享价值吗？

胡安莫施罗特

我正在尝试在2个控制器之间共享服务值，但是双向数据绑定不起作用。不使用就可以这样做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。也许我应该使用观察者或广播来做到这一点。

Pankaj Parkar

您需要将visible变量存储在某个对象内，以便它将使用javascript原型继承，作用域的值将在视图上的任何位置更新，而无需将监视程序放在变量上。可以说我们创建了一个名为的变量variables，其值为，visible以便它可以反映每个控制器上的更改。您需要将整个服务引用添加到控制器，scope以便所有服务变量都可以在html上使用，例如$scope.ValuesStore = ValuesStore;

标记

  <div ng-controller="FirstController">
    <div ng-click="ValuesStore.toggle()">{{ ValuesStore.variables.visible }}</div>
  </div>

  <div ng-controller="SecondController">
     <div ng-click="ValuesStore.toggle()">{{ ValuesStore.variables.visible }}</div>
  </div>

码

var app = angular.module('plunker', []);

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

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

angular.module("plunker")
  .service("ValuesStore", function() {

    this.variables = {};

    this.variables.visible = true;

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