如何以角度在第二个视图中发送参数值？

Question

你能告诉我如何在第二个视图上显示参数的值吗？实际上我制作了一个表单，其中有两个字段：名称和类。当用户按下（填写字段后）添加它在下面生成一行。点击我得到名称和类的值现在我想在下一页显示该名称和值。我们可以显示这个吗？

http://plnkr.co/edit/NSZufLOX7bt52S3fdAXo?p=preview

app.controller("ctrl",['$scope',"$location",function(s,$location){
    s.students = [];

    s.add = function() {

        s.students.push({
            inputName : angular.copy(s.inputName),
            inputclass : angular.copy(s.inputclass)
        });

        s.inputclass='';
        s.inputName='';
    }
    s.getListClick=function(name,className){
        alert(name+":"+className);
        $location.path('/navigation')

    }

}])

谢谢

Answer 1

如 cmets 中所述，您可以使用 $routeParams 来执行此操作，但如果您想在多个控制器之间共享数据，那么执行此操作的常用方法是使用向每个控制器公开 getter 和 setter 的服务注入它进入。

app.factory('Data', function(){
    var data =
        {
            name: '',
            class: ''
        };

    return {
        getName: function () {
            return data.name;
        },
        setName: function (name) {
            data.name = name;
        },
        getClass: function () {
            return data.class;
        },
        setClass: function (klass) {
            //class is reserved word :)
            data.class = klass;
        },
    };
});

然后分享数据：

app.controller("ctrl",['$scope',"$location","Data",function(s,$location,Data){
    s.students = [];

    s.add = function() {

        s.students.push({
            inputName : angular.copy(s.inputName),
            inputclass : angular.copy(s.inputclass)
        });

        Data.setName(s.inputName);
        Data.setClass(s.inputclass);

        s.inputclass='';
        s.inputName='';
    }
    s.getListClick=function(name,className){
        alert(name+":"+className);
        $location.path('/navigation')

    }

}]);

app.controller("secondCtrl",['$scope',"Data",function(s,Data){
    s.name = Data.getName();
    s.class = Data.getClass();
}]);

然后在每个控制器中，您可以使用 getter 检查数据更新，或使用 $watch 自动检查更改：

s.$watch(function () { return Data.getName(); }, function (newVal) {
    if (newValue) {
      s.name = newVal;
    }
});

这是 plunkr：http://plnkr.co/edit/vm1wrahKYOLhvsKKyXj2?p=preview

编辑：

以下是使用ngRoute 和$routeParams（使用您提供的代码）在视图之间传递参数的方法：

  $routeProvider
  .when('/home', {
    templateUrl: 'tem.html',
    controller: 'ctrl'
  })
  .when('/navigation/:name', {
    templateUrl: 'second.html',
    controller: 'secondCtrl'
  })
  .otherwise({
    redirectTo: '/home'
  });

然后在控制器中就可以使用了：

$location.path('/navigation/' + name);

并阅读$routeParams：

app.controller("secondCtrl",['$scope',"$routeParams",function(s,routeParams){
  s.name = routeParams.name;
}]);

http://plnkr.co/edit/kYwIEsBqSrJRJf37ZPI8?p=preview