AngularJS:“ng-view”之外的访问参数的服务与继承

时间:2014-02-10 16:57:15

标签: angularjs angularjs-scope angularjs-service angularjs-controller

在更新AngularJS ng-view之外的参数时,使用Service或依赖Scope Inheritance更有效吗?

我有一个带有ng-view的AngularJS页面和一个公共标题。在ng-view s之间移动时,我想:

  1. 更新公共标题标题
  2. 选择适当的导航菜单项。
  3. 为了做到这一点,我已经阅读了两个常见的解决方案。第一种是提供可以在控制器之间传递变量的服务。在许多地方描述的简单直接的解决方案,包括:AngularJS: How can I pass variables between controllers?

    我发现的第二种方法是利用范围继承并将我的ng-view包装在父控制器中,如下所示:

    <body ng-controller="MainCtrl">
      <!-- stuff -->
    
      <h1>{{ common.pageTitle }}</h1>
      <ng-view></ng-view>
    
      <!-- more stuff -->
    </body>
    

    然后在我的控制器中,我可以执行以下操作:

    myApp.controller('MainCtrl', function ($scope)
    {
        $scope.common = [];
    
        $scope.common.pageTitle = "Set by MainCtrl";
    });
    
    myApp.controller('SplashCtrl', function ($scope)
    {
        $scope.common.pageTitle = "Set by SplashCtrl!"
    });
    

    使用其中一个是否有性能影响?我是否会发现一个隐藏的“陷阱”,如果我使用它,我还没有意识到呢?

1 个答案:

答案 0 :(得分:1)

我建议使用服务或偶数模式而不是继承。除非你有明确的陈述方式,否则“弄清楚”事物的来源和修改内容会更加困难

就性能而言,我不确定什么会更快,但在您需要之前不要担心性能,然后寻找解决您的特定性能问题的方法

如果您想要进入事件模式路线,那么您可以让控制器广播它做了一些事情

$rootScope.broadcast('eventname', { event data });

并在菜单/主控制器中使用这样的消息

$scope.$on('eventname', function(event, data){

      // update menu state...

});
对我来说隐藏的'陷阱'是在进行了几个级别的范围继承之后我发现当我开始编写我的测试代码时,我必须实例化所有'父级'控制器并且我的测试变得过于复杂非常快