Question

我仍然是角度的新手。我之前曾问过类似的问题，但这似乎是一个不同的问题。

我有两个控制器和一个工厂之间共享信息。我有两个不同的div使用两个不同的控制器来显示/隐藏使用ng = show;

HTML

<div id=main>
  <div ng-controller="Ctrl1">
    <div ng-show="var1">Hidden Stuff</div>
  </div>
  <div ng-controller="Ctrl2">
    <div ng-show="var1">More Hidden Stuff</div>
  </div>
</div>

对于ng-show使用相同的var，由工厂共享

JS工厂

app.factory('Srvc', function($rootScope) {
    var Srvc = {};
        Srvc.var1;
    return Srvc;
});

JS控制器

app.controller('Ctrl1', function($scope, Srvc) {
    $scope.var1 = false;
    if (user interacts with html in div with ng-controller="Ctrl1") {
        $scope.var1 = true;
        Srve.var1 = $scope.var1;
    }
});

app.controller('Ctrl2', function($scope, Srvc) {
    $scope.var1 = Srvc.var1;
    if ($scope.var1 === true) {
        update HTML in div with ng-controller="Ctrl2" 
        although I shouldn't need to do this really should I?
    }
});

所以我可以告诉工厂工作正常，数据保存在工厂Srvc.var1中。但是，当我将数据true传递给Srvc.var1时，似乎无法让Ctrl2'触发'并使用ng-show=true更新其html

Answer 1

所以我似乎需要$watch服务器来进行控制器内的更改。

原始答案为here。

app.controller('Ctrl2', function($scope, Srvc) {
    $scope.$watch(function () {
       return Srvc.var1;
     },                       
      function(newVal, oldVal) {
          $scope.var1 = newVal;
    }, true);
});

Answer 2

在不显式创建观察程序的情况下解决此问题的一种方法是将var1包装在服务内的对象中，然后将此对象作为$scope变量传递给Ctrl1和Ctrl2控制器。

<强> DEMO

<强> 的Javascript

  .factory('Svc', function() {
    var service = {
      data: {}
    };

    // If you perform http requests or async procedures then set data.var1 here
    service.data.var1 = true;

    return service;
  })

  .controller('Ctrl1', function($scope, Svc) {
    $scope.data = Svc.data;
  })

  .controller('Ctrl2', function($scope, Svc) {
    $scope.data = Svc.data;
  });

<强> HTML

<div id="main">
  <div ng-controller="Ctrl1">
    <div ng-show="data.var1">Hidden Stuff</div>
    <button type="button" ng-click="data.var1 = true">Set data.var1 to true</button>
    <button type="button" ng-click="data.var1 = false">Set data.var1 to false</button>
  </div>
  <hr>
  <div ng-controller="Ctrl2">
    <div ng-show="data.var1">More Hidden Stuff</div>
    <button type="button" ng-click="data.var1 = true">Set data.var1 to true</button>
    <button type="button" ng-click="data.var1 = false">Set data.var1 to false</button>
  </div>
</div>

Answer 3

我认为将Var1设置为$ rootScope而不是Srvc应该可以正常工作，只需在更新var1后调用$ scope。$ root。$ digest（）。

并在视图中使用ng-show = $ root.Var1。

控制器通过工厂触发

3 个答案: