Question

我正在使用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>

问题是console.log的输出（$ scope.currentDetail）;总是未定义的。我想我在这里错过了$ scope的一些基本概念。非常感谢任何帮助。

Answer 1

你不应该忘记，每个控制器都拥有$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;
}

Answer 2

$ 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;
});

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

2 个答案: