Question

我一直在尝试在控制器中使用服务，特别是在控制器上将绑定范围属性用于服务中的属性。

在下面的代码中，我发现我的控制器中的$ scope.stockCountProp不会更新，而且不像$ scope.stockCountFunc属性那样正确递增。

我发现一些帖子暗示你应该使用范围函数来绑定服务属性，为什么直接属性绑定方法不起作用？

    <div ng-app="myApp" ng-controller="StockCtrl">
    <h2>Stock Checker</h2>
    <h3>Using a scoped function binding</h3>
    Current Stock Level: {{stockCountFunc()}} 
    <br>
    <h3>Using a direct property binding</h3>
    Current Stock Level: {{stockCountProp}} 
    <br><button ng-click="updateStock()">Update Stock</button>
</div>

<script>
var app = angular.module('myApp', [])
.service('StockService', function() {
    var StockModel = {};
    StockModel.totalCount = 5;

    StockModel.addStockItem = function() {
        //Some API call here to add a stock item...
        StockModel.totalCount++;
    };

    StockModel.getTotalCount = function () {
        return StockModel.totalCount;
    };

    return StockModel;
 })
.controller('StockCtrl', function($scope, StockService) {
    $scope.stockCountFunc = StockService.getTotalCount;
    $scope.stockCountProp = StockService.totalCount;


    $scope.updateStock = function() {
        StockService.addStockItem();
    };
});
</script>

演示小提琴https://jsfiddle.net/yh0o7987/2/

Answer 1

$scope.stockCountFunc = StockService.getTotalCount;
$scope.stockCountProp = StockService.totalCount;

你控制器中的这一行是执行一次，这是声明。在第一个你绑定一个函数而不是一个值。该功能永远不会改变，价值会。在第二个，您在控制器上分配服务的值。它永远不会改变。

Current Stock Level: {{stockCountFunc()}}

当你调用这个函数时，无论价值如何，我们都会调用你工厂的吸气剂。这意味着如果值改变，getter将返回新值。

Current Stock Level: {{stockCountProp}}

这个会调用控制器的值，因为它是一个值而不是一个函数。它只会返回初始值。

因此，当它的价值时，Angular将不会进行绑定。这将是一种矫揉造作。

Answer 2

如果您希望在两个对象中进行更改，则应使用prototypal inheritance更新控制器和服务中的值。

为了使totalCount绑定按原型继承工作，我们应该使用object＆amp;然后应该在对象中添加totalCount。

<强>标记

{{model.totalCount}}

<强>服务

.service('StockService', function() {
    var StockModel = {};
    StockModel.model = {}; //change structure to object
    StockModel.model.totalCount = 5;

    StockModel.addStockItem = function() {
        //Some API call here to add a stock item...
        StockModel.model.totalCount++;
    };

    StockModel.getTotalCount = function () {
        return StockModel.model.totalCount;
    };

    return StockModel;
})

<强>控制器

.controller('StockCtrl', function($scope, StockService) {
    $scope.stockCountFunc = StockService.getTotalCount;
    $scope.stockCountProp = StockService.totalCount;

    //this will provide you the two way binding thing as you are using dot rule
    $scope.model = StockService.model;

    $scope.updateStock = function() {
        StockService.addStockItem();
    };
});

Working Fiddle

Answer 3

如果服务中的属性是原始属性（在您的情况下为int），则将其分配给控制器中的$ scope会生成副本而不是引用。因此，更新服务属性不起作用，因为未对控制器副本进行更改。

您提到的功能有效，因为每次调用时都会从服务中获取当前值。

作为替代方法，如果您想避免使用函数，可以从包含该值的服务返回一个对象，例如{myTotal: 123}。

绑定到控制器范围上的服务属性

3 个答案: