Question

我正在尝试在两个控制器之间共享服务值，但双向数据绑定不起作用。是否可以在不使用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

在您的控制器中，直接绑定到服务。

+15

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

访问该属性

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

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

触发{{ ValuesStore.visible }}后，可以自动更新。

但就像@devqon所说，也许你不想让整个服务涉及你的控制器，ValuesStore.Toggle()可以帮助你。

在第一个控制器中，观看$watch

visible

在第二个控制器中，密切关注$scope.visible = ValuesStore.visible; $scope.$watch('visible', function (newValue, oldValue) { if (newValue !== oldValue) { ValueStore.visible = newValue; } });

ValuesStore.visible

Answer 2

尝试：

$scope.$watch(function(){
    return ValuesStore.visible;
}, function (newValue) {
    $scope.visible = newValue
});

取自此示例：http://jsfiddle.net/TheSharpieOne/RA2j7/2/

Answer 3

您需要在某个对象中存储visible变量，以便它使用javascript prototypal inheritance，范围值将在视图的任何位置更新，而不会将观察者放在变量上。假设我们创建一个名为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;
    }
  });

Demo Plunkr

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

3 个答案: