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

时间:2015-04-12 18:43:44

标签: javascript angularjs asp.net-mvc-4 angular-ui-router

在我的angularjs应用程序中,我试图通过路由将数据从一个cshtml视图传递到另一个视图,但在details.cshtml中,我看不到数据进入它虽然我可以看到URL的变化

Index.cshtml(View1)

  <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>

Myrouting

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

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

我为此创建了一个plunker。我无法将第1页的数据发送到第2页 http://plnkr.co/edit/micM7vlslznEIZXP293Y?p=preview

1 个答案:

答案 0 :(得分:1)

您的问题是您的控制器在点击href时再次被实例化,并且范围正在重新创建&amp; $scope.cid设置为undefined。

您可以使用$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服务从网址

获取数据

<强>代码

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