无法通过路由在 angularjs 中的视图之间传递数据

Question

在我的 angularjs 应用程序中，我试图通过路由将数据从一个 cshtml 视图传递到另一个视图，但是在 details.cshtml 中，我没有看到数据进入它，尽管我可以看到 URL

的变化

Index.cshtml（视图 1）

  <a href="/#/Details/{{ cid }}" ng-click="SendToCartPage(cartprd)">{{addprodtocart}} </a>

Controller.js

app.controller('CartController', function ($scope) {
$scope.SendToCartPage = function(cartprd)
{
    var len = cartprd.length - 1;
    $scope.cid = cartprd[len];
}

});

Details.cshtml（我没有看到数据进入下面的跨度）

<div ng-controller="CartController">
    <span ng-model="cid">{{cid}}</span>
</div>

我的路由

var app = angular.module("productmodule", ["ngRoute"]);
app.config(['$routeProvider',
  function ($routeProvider) {
   $routeProvider.

               when('/Details/:cid', {
                   templateUrl: '/Product/Details',
                   controller: 'CartController'
               });
  }]);

我为此创建了一个 plunker。我无法将数据从 page1 发送到 page2 http://plnkr.co/edit/micM7vlslznEIZXP293Y?p=preview

Answer 1

您的问题是您的控制器在单击 href 时再次实例化并且范围正在重新创建并且 $scope.cid 设置为未定义。

您可以通过使用 $routeParams 实现相同的目的，这将提供对 url 包含的内容的访问权

你的情况是 $routeParams.cid

代码

app.controller('CartController', function ($scope, $routeParams) {
  $scope.SendToCartPage = function(cartprd)
  {
    var len = cartprd.length - 1;
    //$scope.cid = cartprd[len];
  }
  $scope.cid = $routeParams.cid;
});

更新

您应该使用 $routeParams 服务从 url

获取数据

代码

var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/Details/:cid', {
      templateUrl: 'page2.html',
      controller: 'CartController'
    }).when('/', {
      templateUrl: 'page1.html',
      controller: 'CartController'
    });
  }
]);
app.controller('CartController', function($scope, $routeParams) {
  $scope.myvar = $routeParams.cid; //this will asign value if `$routeParams` has value
  console.log($scope.myvar);
  $scope.Add = function(c) {
    $scope.myvar = c;
  }
});

Working Plunkr

无法通过路由在 angularjs 中的视图之间传递数据

unable to pass data between the views in angularjs through routing

javascript

asp.net-mvc-4

angularjs

angular-ui-router