AngularJS和链接的资源 - 从范围越来越是否存在 [英] AngularJS and linked resources -- getting from scope if exists

问题描述

我有一个典型的项目/任务/子任务CRUD应用程序，人们可以从一个顶级项目上市一路下跌到一个子任务导航。

所有的资源被路由，例如。

/项目来获取所有项目，

/项目/：ID 来得到一个具体的项目，

/项目/：ID /任务来获得所有任务一个特定的项目，等等。

我渲染，像这样的任务：

 ＆LT; UL＆GT;
  ＆LT;李NG重复=任务中的任务＆GT;
    ＆LT; A HREF =/任务/ {{task.id}}＆GT;
      {{task.name}}＆下; / A＆GT; ...
 

负责该控制器 /任务/：ID 就可以得到使用 $ routeParams 从后端数据API，但我想知道如何从装载任务的我已经在我的的，如链接范围的信息是这样的：

 ＆LT; UL＆GT;
  ＆LT;李NG重复=任务中的任务＆GT;
    ＆LT; A HREF =/任务/ {{task.id}}NG点击=useThisTaskInstead（任务）＆GT;
    ＆所述;！ -  ^^^^^^^^^^^^^^^^^^  - ＆GT;
    ＆LT;！ - 在此设置
                                             目标范围。 - ＆GT;
      {{task.name}}＆下; / A＆GT; ...
 

我想目标控制器只能联系后端API，如果任务不在范围内。

在地址栏中的网址也应该仍然显示 http://example.org/tasks/5 ，例如

更新

东西我想这我不确定：

我有一个顶级的ApplicationController 中，我定义了：

  $ scope.cacheTask：函数（任务）{
  $ scope.task =任务;
};
 

...然后链接变为：

 ＆LT; A HREF =/任务/ {{task.id}}NG点击=cacheTask（任务）＆GT;
 

...在我的 TaskController ：

 如果（typeof运算$ scope.task =='不确定'和;！＆安培; $ scope.task.id == $ routeParams.id）{
        //无关 - 任务范围已经设置。
        的console.log（任务已在范围上）;
    }其他{
        的console.log（取任务）;
        //负荷任务
        $ q.when（taskService.get（$ routeParams.id）$承诺）。然后（函数（任务）{
            的console.log（任务从后端获取任务）;
            //设置范围的任务
            $ scope.task =任务;
        }）;
    }
 

解决方案

本应在模型/持久系统处理。您的模型接入层的API应该抽象缓存路程，控制器/视图可以与生活（任何使用 $范围得到对于非presentational东西是一个一闻恕我直言位）。

控制器和视图应该是完全无知的持久状态。让他们使用类似的方法Task.get（ID）比回报的承诺。干净，您的应用程序的其余部分是毫无收获的承诺是否是从缓存或新鲜的HTTP请求满足。

I have a typical projects/tasks/subtasks CRUD app, and one can navigate from a top level project listing all the way down to a subtask.

All resources are routed, e.g.

/projects to get all projects,

/projects/:id to get a specific project,

/projects/:id/tasks to get all tasks for a specific project, and so on.

I render tasks like so:

<ul>
  <li ng-repeat="task in tasks">
    <a href="/tasks/{{task.id}}">
      {{task.name}}</a> ...

The controller responsible for the /tasks/:id route gets the data using the $routeParams from the backend API, but I was wondering how to load the task from the information I already have in the scope I link from, e.g. something like:

<ul>
  <li ng-repeat="task in tasks">
    <a href="/tasks/{{task.id}}" ng-click="useThisTaskInstead(task)">
    <!--                                   ^^^^^^^^^^^^^^^^^^       -->
    <!--                                   set this in the
                                             target scope.          --> 
      {{task.name}}</a> ...

I want the target controller to only contact the backend API if the task isn't in scope.

The URL in the address bar should also still show http://example.org/tasks/5, for example.

UPDATE

Something I tried which I'm unsure about:

I have a top-level ApplicationController in which I define:

$scope.cacheTask: function (task) {
  $scope.task = task;
};

...and then the link becomes:

<a href="/tasks/{{task.id}}" ng-click="cacheTask(task)">

...and in my TaskController:

    if (typeof $scope.task !== 'undefined'  && $scope.task.id == $routeParams.id) {
        // nothing to do -- task already set in scope.
        console.log("task already in scope");
    } else {
        console.log("fetching task");
        // load task
        $q.when(taskService.get($routeParams.id).$promise).then(function(task) {
            console.log("task fetched from backend", task);
            // set the task in scope
            $scope.task = task;
        });
    }

解决方案

This should be handled in your model/persistence system. Your model access layer's API should abstract the caching away, and the controllers/views can get on with life (any use of $scope for non-presentational stuff is a bit of a smell IMHO).

Controllers and views should be completely ignorant of persistence state. Have them use a method like Task.get(id) than returns a promise. Clean, and the rest of your app is none the wiser whether the promise was fulfilled from cache or a fresh HTTP request.

这篇关于AngularJS和链接的资源 - 从范围越来越是否存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！