javascript - 如何将 Controller 中定义的变量更新为语法？

Question

以下是我正在尝试的代码:

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

var appCtrl = app.controller('AppCtrl', AppCtrl);

function AppCtrl(){
  var appCtrl = this;
  appCtrl.variable = "search";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app = "app">
  <div ng-controller = "AppCtrl as ctrl1">
     {{ctrl1.variable}}
  </div>
  <div ng-controller = "AppCtrl as ctrl2">
    <input type="search" ng-model = "ctrl2.variable"/>
     {{ctrl2.variable}}
  </div>
</div>

当我更新 ctrl2.variable 时，ctrl1.variable 没有更新。

如何在不使用 $scope 的情况下更新它？

Answer 1

在不使用 $scope.$watch 的情况下，我能找到的最简单的解决方案是共享状态，如下所示。

基本上两个 Controller 都具有相同的对象引用，并且会观察到值的任何更改。

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

app.factory('SharedState', SharedState);

function SharedState(){
  var shared = this;
  state = {variable: "search"};
  
  shared.getState = function() {
    return state;  
  }
  
  return shared;
}

app.controller('AppCtrl', AppCtrl);

function AppCtrl(SharedState){
  var appCtrl = this;
  appCtrl.sharedState = SharedState.getState();

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app = "app">
  <div ng-controller = "AppCtrl as ctrl1">
     {{ctrl1.sharedState.variable}}
  </div>
  <div ng-controller = "AppCtrl as ctrl2">
    <input type="search" ng-model = "ctrl2.sharedState.variable"/>
     {{ctrl2.sharedState.variable}}
  </div>
</div>