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

首先，关于标题，我很抱歉，我只是不知道这个问题怎么说

所以我用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>

这将加载文件

table.html

，我希望在此页面中显示所有任务详细信息，即ID、标题、说明等

---

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

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

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

};
});
})();

<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

现在datafactory是工厂，我们需要将此模块（dataModule）注入您的模块中，将工厂（datafactory）注入控制器中

现在如何使用这个工厂 在你的职责范围内

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

现在，这个数据工厂存储我们可以在任何控制器中使用的变量，稍后，您还可以使用这个工厂存储任何这样的变量以供全局使用 像这个datafactory.Myvariable=“hasd”//assign在这里

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

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

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

假设html看起来像这样

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

};
});
})();

<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

身份证件
标题
开始日期
结束日期
类型
{{task.id}
{{task.title}}
{{task.start_date}
{{task.end_date}
{{task.type}
使用ng route或ui router设置路由，使页面不会重新加载。然后，您不必转到localStorage，您可以使用路由定义来定义所需的路由。谢谢你的回答。我已经试了一整天了，但我似乎无法通过ng路线实现这一目标。我正在使用Datatables，当我在不重新加载的情况下更改视图（通过单击任务查看详细信息），然后返回到任务列表时，我的表被弄乱了，按钮停止工作。我不知道为什么会发生这种情况。请使用浏览器中的调试器工具查看发生了什么。非常感谢您的评论！你介意更好地解释最后一段代码吗？我不太明白我应该写在哪里。