时间戳

首页 > 解决方案 > 无法读取未定义的属性“nid”，需要将对象传递给另一个控制器

angularjs - 无法读取未定义的属性“nid”，需要将对象传递给另一个控制器

问题描述

我在尝试将选定值从一个控制器传递到另一个控制器时遇到问题。

查看（我将 NgValue 传递给 Controller 中的 $scope）。

<li class="list-group-item" ng-repeat="item in filterData = (informes | filter:{title:searchTitle, resolucion:searchReso, year: searchYear}) | limitTo:10:10*(currentPage-1)">
                     <div class="wrapper">
                        <div class="informes" ng-value="nodeID(item)">
                          <a ng-href="../node-informes/node-informes.html">
                            <p class="text-center text-truncate">
                               <small>{{item.title}}</small>
                            </p>
                          </a>
                        </div>
                    </div>
                </li>

控制器。我有“该控制器中的项目”并且控制台打印它。

informes.controller('InformesCtrl', ['drupal', '$rootScope', '$scope', '$http', 'InformesFtry', function(drupal, $rootScope, $scope, $http, InformesFtry) {
      $rootScope.getData = function(informes){
          $rootScope.nodeID = function(item){
              $rootScope.node = item.nid;
              console.log($rootScope.node);
          };       
      }
}]);

另一个模块中的第二个控制器（给我“无法读取未定义的属性'nid'错误”）。

nodeInformes.controller('NodeInformesCtrl', ['$rootScope', '$scope', '$http', '$controller', function($rootScope, $scope, $http, $controller) {
  $controller('InformesCtrl', {$scope: $scope});
  $rootScope.getData(informes);
  $rootScope.nodeID(item);
  $scope.node = $rootScope.node;
  console.log($scope.node);
}]);

它假设我用参数调用了另一个控制器（保存在“$rootScope.node”中的值，将它传递给第二个控制器，但它给了我未定义的错误）。

第一个控制器中的控制台日志有效，但在第二个控制器中无效。

我很感激任何建议。

修改为代码建议，但似乎“项目”对象没有以正确的方式传递。

标签： angularjscontrollerundefined

解决方案

除非绝对必须，否则尽量避免使用$rootScope（引发或处理事件大约是我用过的唯一一次$rootScope） - 相反，您可以使用服务在控制器之间可靠地传递数据。在 AngularJS 中，服务是单例的，所以你的所有控制器都可以访问同一个实例。您可以利用这一点并使用该服务在控制器之间“传递”（更准确地共享）数据。

这是一个简单的示例来演示您可以将其应用于您的情况的概念。通常，您不会在这样的单个视图中拥有两个控制器，但出于说明目的（并且能够在 SO 代码段引擎中运行），我在这里完成了它。只是为了证明我没有共享任何控制器变量，我以不同的方式命名它们。

angular.module('app', [])
  .service('sharedService', function() {
    var service = {};
    service.sharedObject = {};
    service.sharedObject.value = "Set in service";
    return service;
  })
  .controller('ctrlOne', function($scope, sharedService) {
    $scope.sharedObjectC1 = sharedService.sharedObject;
  })
  .controller('ctrlTwo', function($scope, sharedService) {
    $scope.sharedObjectC2 = sharedService.sharedObject;
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrlOne" style="margin-bottom: 30px;">
    <h1>Controller One</h1>
    Modifying this value will update it in Controller Two:
    <div>
      <input ng-model="sharedObjectC1.value" />
    </div>
  </div>
  <hr>
  <div ng-controller="ctrlTwo">
    <h1>Controller Two</h1>
    Modifying this value will update it in Controller One:
    <div>
      <input ng-model="sharedObjectC2.value" />
    </div>
  </div>
</div>

推荐阅读