Question

我有一个标准Angular.js应用。我有service这样的话：

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

在我的controller中，我可以像这样使用service：

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内的临时变量中，我可以在模板中使用该temp，但我不喜欢这种方法。有没有正确的方法？

Answer 1

您的范围变量是用于绑定到视图的角度。您的视图无法访问您的服务，因为它们不属于您的范围。

控制器的目的是将您的所有服务整合在一起，并将这些数据提供给您的视图/范围。

您通常不会将服务直接暴露给您的范围。它们通常提供通用的单个可重用逻辑。这使它们极易重复使用并且易于测试。但是，您可以通过

将数据直接绑定到它们

$scope.myService = myService;

然而，我个人会避免这种情况，就像瘟疫一样，通过整个应用程序使用服务，您的视图对服务的更改将反映在整个应用程序中。这将使您的服务不可信是结构，很可能无用。

我创建了一个小提示：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();
    }
   } 
});

Answer 2

要在html中访问它，您需要将其绑定到您的控制器，然后在您的html中使用app.service("myService",function(){ this.variable = "world"; });。

<强>服务

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

<强>控制器

<h1>hello {{value}}</h1>

<强> HTML

{{1}}

您永远不会在您的HTML中注入您的服务，只能在您的控制器中注入。

将服务内的变量绑定到Angular App中的html模板

2 个答案: