在AngularJS中的不同控制器中访问$scope

我正在用AngularJS做我的第一步，有一个非常基本的问题。我有一些产品的概述页面，希望每个产品都有一个详细视图。以下是我的控制器的相关代码：

shop.controller('OverviewController', ['$scope', '$location', 'Overview', function($scope, $location, Overview){
    console.log($scope.currentDetail); //always undefined
    $scope.overview = Overview.get();
    $scope.showDetails = function(product){
        $scope.currentDetail = product;
        console.log($scope.currentDetail); //output as expected
        $location.path("/productDetail");
    }
}
]);

shop.controller('DetailController', ['$scope', function($scope){
    console.log($scope.currentDetail);
}
]);

概述页面中的相关部分如下所示：

<table class="table table-hover">
    <tr ng-repeat="product in overview.product" ng-click="showDetails(product);">

        <td>
            {{product.DESCRIPTION}}
        </td>

    </tr>
</table>

{{product.DESCRIPTION}}

---

问题是console.log（$scope.currentDetail）的输出不正确；总是未定义的。我想我缺少了$scope的一些基本概念。非常感谢您的帮助。

您不应该忘记，每个控制器都有自己的

$scope

您可以将共享服务用于需要将一些值从一个控制器传递到另一个控制器的情况

例如：

angular.module("yourAppName", []).factory("mySharedService", function(){
    var mySharedService = {};

    mySharedService.values = {};

    mySharedService.setValues = function(params){
        mySharedService.values = params;
    }

      return mySharedService; 
});

然后将其注入任何控制器

function OverviewController($scope, mySharedService) {
    $scope.changeProductValue = function(value){
        mySharedService.setValues(value);  
    }
}

function DetailController($scope, mySharedService) {
   $scope.currentDetail = myService.values;
}

---

您不应该忘记，每个控制器都有自己的

$scope

您可以将共享服务用于需要将一些值从一个控制器传递到另一个控制器的情况

例如：

angular.module("yourAppName", []).factory("mySharedService", function(){
    var mySharedService = {};

    mySharedService.values = {};

    mySharedService.setValues = function(params){
        mySharedService.values = params;
    }

      return mySharedService; 
});

然后将其注入任何控制器

function OverviewController($scope, mySharedService) {
    $scope.changeProductValue = function(value){
        mySharedService.setValues(value);  
    }
}

function DetailController($scope, mySharedService) {
   $scope.currentDetail = myService.values;
}

---

$scope仅特定于特定控制器。因此，每个控制器都有自己的范围变量。如果您想在控制器之间共享数据，请使用如下服务

shop.controller('OverviewController', ['$scope', '$location', 'Overview', function($scope, $location, Overview, detailService){

    $scope.overview = Overview.get();
    $scope.showDetails = function(product){
        $scope.currentDetail = me.details = product;
        $location.path("/productDetail");
    }
}
]);

shop.controller('DetailController', ['$scope', function($scope, detailService){
    $scope.currentDetail = detailService.details;
    console.log($scope.currentDetail);
}
]);

shop.service('detailService', function(){
  var me = this;
  me.details = {};
  return this;
});

---

$scope仅特定于特定控制器。因此，每个控制器都有自己的范围变量。如果您想在控制器之间共享数据，请使用如下服务

shop.controller('OverviewController', ['$scope', '$location', 'Overview', function($scope, $location, Overview, detailService){

    $scope.overview = Overview.get();
    $scope.showDetails = function(product){
        $scope.currentDetail = me.details = product;
        $location.path("/productDetail");
    }
}
]);

shop.controller('DetailController', ['$scope', function($scope, detailService){
    $scope.currentDetail = detailService.details;
    console.log($scope.currentDetail);
}
]);

shop.service('detailService', function(){
  var me = this;
  me.details = {};
  return this;
});

---

谢谢，我会试试的。作为替代方案，我希望重用OverviewController。单击（运行showDetails函数）时，数据已正确填充，但导航到详细信息时，将再次调用控制器代码，并且$scope.currentDetail的值再次未定义。你知道吗？@Paul，如果你已经将数据保存到sharedService，你可以从中获得必要的价值。当您从概览页面转到详细视图页面时，您将从共享服务中获取数据，就像我的答案中的示例一样。非常感谢，它正在工作。我只是在寻找另一种方法，但我会把它放在另一个问题。。。再次感谢。谢谢，我会试试的。作为替代方案，我希望重用OverviewController。单击（运行showDetails函数）时，数据已正确填充，但导航到详细信息时，将再次调用控制器代码，并且$scope.currentDetail的值再次未定义。你知道吗？@Paul，如果你已经将数据保存到sharedService，你可以从中获得必要的价值。当您从概览页面转到详细视图页面时，您将从共享服务中获取数据，就像我的答案中的示例一样。非常感谢，它正在工作。我只是在寻找另一种方法，但我会把它放在另一个问题。。。再次感谢。