javascript - 在 Angular 中，你总是需要继承 Controller 中的服务变量吗？

Question

我现在开始关注 Angular，但有两件事让我苦苦挣扎:

第一个问题:我有一个 Controller “AboutCtrl”，它使用服务“Abstract”中的变量。现在我想做的是在此服务中设置一些基本变量，例如:“mobileMenuOpen”。

现在我想要的是“AboutCtrl”使用“Abstract”中的值，现在我一直在四处搜索，我发现了这种方法:

constructor (private $scope: IAboutScope, $rootScope, Abstract) {
  console.log(Abstract);
  $scope.mobileMenuOpen = Abstract.mobileMenuOpen;
}

现在我想知道的是，有没有办法自动继承所有这些变量？

第二个问题:有没有办法在 view/index.html 中显示“Abstract”服务中的变量？

示例: 在我的 about View 中，我想显示 mobileMenuOpen 的值，现在当我继承 AboutCtrl 中的变量(如上所示)时，它可以工作，但是我如何能够在没有继承的情况下做到这一点？

我已经做了一些关于最佳实践的研究，并且使用服务/工厂似乎是最佳实践，如果没有其他一些示例，我们将不胜感激。

Answer 1

假设您的服务如下所示:

.service('abstract', function abstract(){
  this.mobileMenuOpen = false;
  this.someMethod = function(){
    //do the magic
    return 'cowabunga';
  };
})

如果您通过引用将服务分配给 $scope，如下所示:

$scope.myAbstract = abstract 

然后您的服务的所有值都将分配给 myAbstract 并可以在模板中访问，而且它将是双向绑定(bind)的

<p> Is the menu open: {{ myAbstract.mobileMenuOpen }} </p>
<p> {{ myAbstract.someMethod() }} was the ninja turtles war cry! </p>

类似于赋值

$scope.mobileMenuOpen = abstract.mobileMenuOpen;

将按值分配它，因此您稍后在服务中进行的任何更改都不会影响 $scope.mobileMenuOpen