Angular - 传递数据 - 服务与URL参数对$ scope

时间:2016-03-17 15:02:59

标签: angularjs

我是Angular的新手,我想这个问题可能已经有了一些评论但是我想知道Angular开发人员找到了如何处理的最佳实践:

  • 在页面之间传递数据(假设每个页面都有自己的控制器)。

所以我可以看到3种方式:

1 - 在URL参数中(我不喜欢这个 - 不提供很大的灵活性,在我看来也不是那么好)

2 - 创建服务(例如,如此处所述AngularJS - Passing data between pages

3 - 使用父'$ scope'

感谢。

4 个答案:

答案 0 :(得分:1)

大多数情况下,您需要使用 FACTORY ,因为它有:

  • 使用其他服务的能力(具有依赖性)
  • 服务初始化
  • 延迟/延迟初始化

工厂示例Fiddle

<div ng-app="myApp">

    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
        <br>Input is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
    </div>
    <hr>
    <div ng-controller="SecondCtrl">
        Input should also be here: {{Data.FirstName}}<!-- How do I automatically updated it here? -->
    </div>

</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){
   return { FirstName: '' };
});

myApp.controller('FirstCtrl', function( $scope, Data ){
   $scope.Data = Data;
});

myApp.controller('SecondCtrl', function( $scope, Data ){
   $scope.Data = Data;
});

使用$ broadcast

您还可以使用 $ broadcast 将数据从控制器的高层传递到最后。(示例:jsFiddle

答案 1 :(得分:0)

No 2是最好的方式,因为我总是在我的项目中使用它

答案 2 :(得分:0)

  

2 - 创建服务(例如,如此处所描述的AngularJS - 在页面之间传递数据)

这是 Angular-ish 方式,正如您所指出的那样,是他们的文档推荐的。

但是有一些事情值得思考,其中很多都取决于a)你的开发经验和b)你习惯的开发范例。作为一个背景,我来自一个非常 Java-ish 背景(我是一个Flex / Actionscript开发人员近10年)。许多典型的Java-esque开发范例都没有在Angular中清楚地表现出来。在我看来,Angular来自一个更像Ruby的范例。许多API和使用建议都举例说明了这一点。

我发现的一件事是,从长远来看,推动自己的解决方案绕过一些可能对您的开发倾向感到厌恶的事情往往更多。我可以给你大约6-7个例子(如果你愿意的话,在评论中),我在使用Angular方面缺乏经验,而我作为一个经验丰富的开发人员的顽固态度最终导致我最终重构为更加Angular。

所以回顾一下,在构造到构造通信的情况下,我会选择#2。只有当建议的选项不符合您的需求时,我才会选择将事件总线作为次要选项。

答案 3 :(得分:0)

这取决于您传递的数据是什么。

如果有一些数据确定您的控制器的状态,并且应该可由用户链接,例如你有一个显示博客文章的页面,它需要一个ID来从数据库中获取文章信息,那么该id应该是一个url参数,例如/blog/:id

如果您需要某些属于父控制器的数据,例如你有一个博客文章页面,该页面的子部分是一个作者面板,需要从博客对象本身获取一些信息,然后你可以通过父$scope访问它,但是你应该注意到这一点将作者面板与博客文章控制器结合起来,创建指令并将博客对象传递到指令隔离范围几乎总是更好的主意。

如果你有一些全球数据,例如登录用户的语言设置需要所有页面访问,然后您应该使用服务。

如果您需要一些与事件有关的数据,例如用户点击某些内容并在其他地方需要了解该指令,然后您可以使用$emit$broadcast