参数未传递到下一页 - AngularJS

时间:2015-09-26 07:32:35

标签: javascript angularjs html5

我想将一个参数传递给下一页点击按钮。

我试过如下;在第一页上我有一个textarea,我希望使用AngularJS将该值传递到按钮点击的下一页,我尝试过如下,但它不起作用。

的index.html

<!doctype html>
<html ng-app="project">
<head>
    <title>Angular: Service example</title>
    <script src="http://code.angularjs.org/angular-1.0.1.js"></script>
        <script src="sample.js"></script>
</head>
<body>  
    <div ng-controller="FirstCtrl">
        <h2>{{name}}</h2>
        <input ng-model="thing.x"/>         
    </div>

    <input type="button" value="send" onclick="send()">

    <script>
        function send(){
            window.location ="second.html";
        }

    </script>
</body>
</html>

sample.js

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */



var projectModule = angular.module('project',[]);

projectModule.factory('theService', function() {  
    return {
        thing : {
            x : 100
        }
    };
});

function FirstCtrl($scope, theService) {
    $scope.thing = theService.thing;
    $scope.name = "First Controller";
}

function SecondCtrl($scope, theService) {   
    $scope.someThing = theService.thing; 
    $scope.name = "Second Controller!";
}

second.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Passed data</title>
        <script src="sample.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
     <div ng-controller="SecondCtrl">
        <h2>{{name}}</h2>
        <input ng-model="someThing.x"/>             
    </div>

        <br>

    </body>
</html>

请你能帮我解决一下吗?

2 个答案:

答案 0 :(得分:0)

要将参数发送到下一页,您必须使用$location服务。

$location.path('/second').search({id: 12});

但是这对你不起作用,因为你没有使用AngularJS进行路由,你正在使用JS。我建议按照PhoneCatApp来学习Angular基础知识

答案 1 :(得分:0)

首先阅读此https://docs.angularjs.org/guide/$location

删除发送()功能

function FirstCtrl($scope, $location, theService) {
    $scope.thing = theService.thing;
    $scope.name = "First Controller";
    $scope.send = function(){
       $location.path('/second').search({id: 12});
    };
}
<input type="button" value="send" ng-click="send()">