Question

如何以角度分享两个控制器之间的值。我的场景有两个控制器和一个服务。当用户点击按钮时，第一个控制器必须创建一个随机数并将其传递给另一个控制器。

以下是我的示例代码：

var app = angular.module('app', []);
app.controller("FirstController", function ($scope,sharedDateRange)  
  {    
      $scope.test = function(){
          sharedDateRange.setData();
      }
        
  });

app.controller("SecondController", function ($scope,sharedDateRange) {
    var data=[];
    data = sharedDateRange.getData();
    alert(data);
});


app.service('sharedDateRange', function ($http) {
var data=[];
return {
    setData: function () {
            data = Math.floor(Math.random() * 6) + 1;
        }
    ,
    getData: function(){
        return data;
    }
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="FirstController">
        <button ng-click="test()"> Click</button>
    </div>
    <div ng-controller="SecondController">
        <span>{{data}}</span>
    </div>
</div>

Answer 1

您的意思是当值发生变化时，第二个控制器必须获得新值吗？我使用$broadcast and $on。

app.controller("FirstController", function ($scope,$rootScope,sharedDateRange)  
  {    
      $scope.test = function(){
          sharedDateRange.setData();
          $rootScope.$broadcast('changeValue');
      }

  });

app.controller("SecondController", function ($scope,sharedDateRange) {
    var data=[];
    data = sharedDateRange.getData();
    $scope.data = data;

    var cleanup = $scope.$on('changeValue', function() {
      console.log("get");
      $scope.data = sharedDateRange.getData();
    })

   //make sure to destroy to avoid memory leaks
    $scope.$on('$destroy', cleanup);
});

HTML：

<div ng-controller="FirstController">
   <button ng-click="test()">create random number</button>  
</div>
<div ng-controller="SecondController">
   {{data}}
</div>

工作演示 here

Answer 2

将setdata（）放在服务中，只需访问它就是secondController。

Answer 3

代码的问题在于，当您运行HTML页面时，它会依次运行firstCtrl和secondCtrl，因为您已在HTML代码中设置它们。因此，根据您的代码，当您的firstCtrl运行时会发生什么，它不会将任何随机值设置为数据。同时你的secondCtrl也会运行，它没有任何价值。

我已经改变了你的代码。简单的代码。我删除了按钮点击事件。检查此代码。它很简单，也很容易理解。

HTML

<div ng-app="app">
    <div ng-controller="FirstController">

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

的.js

var app = angular.module('app', []);
app.controller("FirstController", function ($scope,sharedDateRange)  
  {    
         sharedDateRange.setData();
  });

app.controller("SecondController", function ($scope,sharedDateRange) {
    $scope.data=sharedDateRange.getData();
    console.log($scope.data);
});


app.service('sharedDateRange', function ($http) {
var data="";
return {
    setData: function () {
        debugger;
          data = Math.floor(Math.random() * 6) + 1;
        }
    ,
    getData: function(){
        return data;
    }
}
});

https://jsfiddle.net/codu16t5/

两个控制器在角度上的关系

3 个答案: