Question

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

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

如评论中所述，您可以使用$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;
    }
});

这里是傻瓜：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

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

1 个答案: