javascript - 如何在加载不同的 .html 文件时访问特定的 $scope 变量？

Question

首先，对标题感到抱歉，我只是不知道如何表达这个问题。

所以我正在使用 AngularJS 制作一个任务管理器。我有一个表格供用户在创建新任务时填写详细信息。我使用 ng-model 将这些值保存到我的 $scope。以下是我如何保存它们:

$scope.add = function(tasks)
{
    {
        $scope.tasks.push({
            'id': tasks.id,
            'title': tasks.title,
            'start_day': tasks.start_day,
            'start_time':tasks.start_time,
            'start_date':tasks.start_day + " " + tasks.start_time,
            'end_day': tasks.end_day,
            'end_time': tasks.end_time,
            'end_date':tasks.end_day + " " + tasks.end_time,
            'type': tasks.type,
            'description': tasks.description
        });
        localStorage.setItem('tasks',JSON.stringify($scope.tasks));
    }
};

然后，如您所见，我将这些值保存到本地存储中。我有一个名为 tasks 的数组，其中包含用户创建的所有任务。然后我将这些任务显示在一个表格中:

<table id="datatable" class="display" ng-cloak>
    <thead>
    <tr>
        <th><b>ID</b></th>
        <th><b>Title</b></th>
        <th><b>Start Date</b></th>
        <th><b>End Date</b></th>
        <th><b>Type</b></th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="task in tasks track by $index">
        <td ng-click="details(task)">{{task.id}}</td>
        <td ng-click="details(task)">{{task.title}}</td>
        <td ng-click="details(task)">{{task.start_date}}</td>
        <td ng-click="details(task)">{{task.end_date}}</td>
        <td ng-click="details(task)">{{task.type}}</td>
        <td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
    </tr>
    </tbody>
</table>

然后，目标是您可以单击任何行并加载包含所有任务详细信息的新页面。我使用函数 details() 执行此操作，该函数具有以下代码:

$scope.details = function (task)
{
    $window.location.href = 'table.html';
}

这会加载文件 table.html 并且我想要在此页面中显示所有任务详细信息，即 ID、标题、描述、等

我不知道的是如何只显示您点击的特定任务。例如，如果我单击包含任务“Todo #1”的行，我只想查看任务“Todo #1”的详细信息。

Answer 1

要在其他 html 中访问此变量，您可以像这样使用工厂或服务

(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
return {

};
});
})();

现在 datafactory 是工厂，我们需要将这个模块(dataModule)注入(inject)到您的模块中，并将工厂(datafactory)注入(inject)到 Controller 中

现在如何使用这个工厂在你的函数中

$scope.details = function (task)
{
datafactory.currentTask =task
$window.location.href = 'table.html';
}

现在这个数据工厂存储我们可以在任何 Controller 中使用的变量，稍后您也可以使用这个工厂存储任何此类变量以供全局使用像这样 datafactory.Myvariable ="hasd"//在这里赋值

现在使用这个变量假设你想在另一个页面 table.html 中使用这个变量

// in html ng-init ="$scopeInit()"

in controller
$scopeInit =function(){
$scope.localTask =datafactory.currentTask
}
and use $scope.localTask

假设 html 看起来像这样

<div ng-controller ="my-controller" ng-init ="$scopeInit()">
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>

<div>

//in controller

$scopeInit =function(){
$scope.task =datafactory.currentTask
}

//$scope.task contains required array and hence table can be created