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

Posted 2023-03-05

【中文标题】加载不同的 .html 文件时如何访问特定的 $scope 变量？

【英文标题】：How to access a specific $scope variable when loading a different .html file?

【发布时间】：2016-10-16 20:58:49

【问题描述】：

首先，抱歉标题，我只是不知道如何措辞这个问题。

所以我正在使用 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”的详细信息。

【问题讨论】：

使用 ng-route 或 ui-router 设置路由，使页面不会重新加载。那你就不用去localStorage了，你可以用路由定义来定义你要哪一个。请review the tutorial

感谢您的回答。我整天都在尝试，但我似乎无法使用 ng-route 完成这项工作。我正在使用 Datatables，当我更改视图而不重新加载（通过单击任务以查看详细信息）然后返回任务列表时，这会弄乱我的表并且按钮停止工作。我不知道为什么会这样。

使用浏览器中的调试器工具四处寻找，看看发生了什么。

【参考方案1】：

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

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

;
);
)();

现在 datafactory 是工厂，我们需要在你的模块中注入这个模块（dataModule），在控制器中注入工厂（datafactory）

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

$scope.details = function (task)

datafactory.currentTask =task
$window.location.href = 'table.html';

现在这个数据工厂存储你的变量，我们可以在任何控制器中使用，以后你也可以使用这个工厂来存储任何这样的变量以供全局使用 像这个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

【讨论】：

非常感谢您的评论！你介意把最后一段代码解释得更好一点吗？我不太明白我应该在哪里写。