如何在加载不同的.html文件时访问特定的$ scope变量？ [英] How to access a specific $scope variable when loading a different .html file?

问题描述

首先，对于标题感到抱歉，我只是不知道该怎么说这个问题。所以我正在使用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 =datatableclass =displayng-斗篷> 
< thead> 
< tr> 
< th>< b> ID< / b>< / th> 
< th>< b>标题< / b>< / th> 
< th>< b>开始日期< / b>< / th> 
< th>< b>结束日期< / b>< / th> 
< th>< b>类型< / b>< / th> 
< th>< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr ng-repeat =任务追踪中的任务追踪$索引> 
< 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 wave-effect waves -light light red< i class =material-icons> clear< / i> < / td> 
< / tr> 
< / tbody> 
< / table> 
< / code> pre> 
 
 
然后，目标是可以单击任意行并加载一个新页面，其中包含所有任务详细信息。我使用函数详细信息（），其中包含以下代码： 
 
 
  $ scope.details = function（task） 
 {
 $ window.location.href ='table.html'; 
} 
  
这会加载文件 table.html ，我想要的是在此页面中显示所有任务详细信息，即， ID，标题，描述等等。
 
 
 
我不知道的是如何仅显示您点击的特定任务例如，如果我点击任务Todo＃1的行，我只想看到任务的详细信息 Todo＃1。
解决方案
要在其他html中访问此变量，您可以使用这种工厂或服务。 b 
 $ b 
 （function（）{
use strict; 
 angular.module（'dataModule'，[]）
 .factory（'datafactory'，function（）{
 return {
 
}; 
 }）; 
}）（）; 
  
现在datafactory是我们需要在模块和工厂（datafactory）中注入此模块（dataModule） in controller 
 
 
 
现在如何在你的函数中使用这个工厂
 
 
 
  $ scope.details = function（task）
 {
 datafactory.currentTask =任务
 $ window.location.href ='table.html'; 
 
 
 
 
 
 $ b现在这个datafactory存储你可以在任何控制器中使用的变量，你也可以使用这个工厂来存储任何这样的全局变量
，像这样datafactory.Myvariable =hasd//在这里赋值
 
 
现在使用这个变量
假设你想在另一个页面table.html中使用这个变量
  //在html ng- init =$ scopeInit（）
 
 in controller 
 $ scopeInit = function（）{
 $ scope.localTask​​ = datafactory.currentTask 
} 
并使用$ scope.localTask​​ 
  
假设html看起来像这样
 < div ng-controller =my-controllerng-init =$ scopeInit（）> 
< table id =datatableclass =displayng-cloak> 
< thead> 
< tr> 
< th>< b> ID< / b>< / th> 
< th>< b>标题< / b>< / th> 
< th>< b>开始日期< / b>< / th> 
< th>< b>结束日期< / b>< / th> 
< th>< b>类型< / b>< / th> 
< th>< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr ng-repeat =任务追踪中的任务追踪$索引> 
< 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 wave-effect waves -light light red< i class =material-icons> clear< / i> < / t> 
< / tr> 
< / tbody> 
< / table> 
 
< div> 
 
 //在控制器
 
 $ scopeInit = function（）{
 $ scope.task = datafactory.currentTask 
} 
 
 //$scope.task包含所需的数组，因此可以创建表
  
 
First of all, sorry about the title, I just wan't sure how to word this question.

So I'm making a task manager using AngularJS. I have a form for the user to fill with the details when he's creating a new task. I use ng-model to save these values to my $scope. Here's how I save them:
$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));
    }
};
Then, as you can see, I save these values to the local storage. I have an array called tasks with all the tasks the user created. I then display these tasks in a table with this:
<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>
Then, the objective is that you can click any row and load a new page with all the task details. I do this with the function details(), which has the following code:
$scope.details = function (task)
{
    $window.location.href = 'table.html';
}
This loads the file table.html and what I want is to display in this page all the task details, i.e., the ID, the title, the description, etc.

What I don't know is how to only display the specific task that you click on. For example, if I click on the row with the task "Todo #1", I only want to see the details for the task "Todo #1".
解决方案
to access this variable in other html you can use factory or service like this
(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
return {

};
});
})();
Now datafactory is factory we need to inject this module(dataModule) in your module and factory(datafactory) in controller

Now how to use this factory
in your function
$scope.details = function (task)
{
datafactory.currentTask =task
$window.location.href = 'table.html';
}
Now this datafactory stores your variable that can we used in any controller and later on also you can use this factory to store any such variable for global use
like this datafactory.Myvariable ="hasd"//assign here

Now to use this variable
Suppose you want to use this variable in another page table.html there on 
// in html ng-init ="$scopeInit()"

in controller
$scopeInit =function(){
$scope.localTask =datafactory.currentTask
}
and use $scope.localTask
suppose html looks something like this
<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


                        
这篇关于如何在加载不同的.html文件时访问特定的$ scope变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！