javascript - 将服务内的变量绑定(bind)到 Angular 应用程序中的 html 模板

Question

我有一个标准的 Angular.js 应用程序。我有一个这样的服务:

app.service("myService",function(){
   this.variable = "world";
});

在我的 Controller 中，我可以像这样使用这个服务:

app.controller("loginCtrl",function($scope,myService){
    $scope.value = myService.variable; // this works
});

但我的问题是我无法访问我的 HTML 模板中的 service 值:

<h1>hello {{myService.variable}}</h1> //this doesn't work

如果我将 service 变量存储在我的 controller 中的临时变量中，我可以在模板中使用该临时变量，但我不喜欢这种方法。有什么好的方法吗？

Answer 1

您的范围变量是 Angular 将用来绑定(bind)到您的 View 的变量。您的 View 无权访问您的服务，因为它们不属于您的范围。

Controller 的目的是将您的所有服务整合在一起，并将该数据提供给您的 View /范围。

您通常不会将您的服务直接暴露给您的范围。他们通常提供通用的单一可重用逻辑片段。这使得它们具有极大的可重用性和易于测试性。但是，您可以通过

将数据直接绑定(bind)到它们

$scope.myService = myService;

但是我个人会像瘟疫一样避免这种情况，因为在整个应用程序中使用服务，您对服务的 View 所做的更改将反射(reflect)在整个应用程序中。这将使您的服务结构不可信并且很可能毫无用处。

我创建了一个 fiddle 显示:http://jsfiddle.net/5g3tnq17/

var app = angular.module('test', [])
.controller('testController', function($scope, testService){
    //When you modify $scope.testService
    $scope.testService = testService;
})
.service('testService', function(){
    this.prop = 'hi';   
})
.directive('testDirective', function(testService){
   return {
    type: 'EA',
    template: '<button ng-click="get()">get service value</button>{{serviceValue}}',
    link: function($scope, elem, sttr){
        //Test service will also be modified anywhere else you use it
        $scope.get = function(){
            $scope.serviceValue = testService.prop;   
        }

        $scope.get();
    }
   } 
});