Question

我正在尝试使用Angular将数据值从一个页面传递到另一个页面。我是Angular的新手，所以如果听起来很傻，请耐心等待。这是我的HTML和Angular代码。基本上，我希望ng-model“jobtitle”值填写在用户点击该div后在不同页面上的表单中。

Page1的HTML（数据源）

<div id="portfoliolist" ng-app="careerApp" ng-controller="JobList">
<div class="portfolio DataScience col-xs-12 col-sm-12 col-md-4 col-lg-4" data-cat="DataScience">
<a href="~/career-form.cshtml" class="portfolio-wrapper">
                            <!-- Item Details -->
                            <div class="protfolio-caption-activeWrap">
                                <!-- Centered Details -->
                                <div class="center-details">
                                    <div class="details">
                                        <!-- Item Name -->
                                        <h2 class="name" ng-model="jobtitle">
                                            Winter
                                        </h2>
                                        <p><b>Job ID#</b> <span class="jobid" ng-model="jobid">2017-01</span></p>
                                        <p ng-click="set(data)" class="btn btn-sm">Apply</p>
                                        <!-- Tags -->
                                    </div>
                                </div>
                                <!-- End Center Details Div -->
                            </div>
                            <!-- End Item Details -->
                        </a>
                    </div>
</div>

Page2的HTML（要复制数据的地方）

<div ng-app="careerApp" ng-controller="JobSelection">
                                    <form class="tsf-step-content">
                                        <label>{{jobtitle}}</label>
                                        <label>{{jobid}}</label>
                                        </form>
</div>

Angular script

    var careerApp = angular.module("careerApp", []);
careerApp.factory('myService', function () {
    var savedData = {}
    function set(data) {
        savedData = data;
    }
    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get
    }

});

careerApp.controller("JobList", ['$scope', function ($scope) {
    myService.set($scope.jobtitle);
}]);
careerApp.controller("JobSelection", ['$scope',function ($scope) {
    $scope.jobtitle = myService.get();
}]);

Answer 1

在两个不同的页面中两次声明ng-app是错误的。传递数据的简单方法是将其存储在$ rootScope中。

Answer 2

尝试这样的事情

//Controller foo

app.controller('fooController', ['$scope', 'foobarService', function($scope, foobarService){
$scope.StoreId = function(id){
    foobarService.setId(id);
}]);

//foobarService
app.service('foobarService', [function(){
    var id;

    this.setId = function(id){
        id = id;
    }

    this.getId = function(){
        return id;
    }
}]);

//Controller bar
app.controller('barController', ['$scope', 'foobarService', function($scope, foobarService){
    $scope.id = foobarService.getId();
}]);

使用Angularjs将Click事件的值传递到另一个页面

2 个答案: