1

我已经看到了两种方法来做到这一点。查看服务/控制器：

var app = angular.module('myApp', []);

app.service('user', function() {    
    this.loggedIn = false;
    this.logIn = function() { 
        this.loggedIn = true; 
    };
    this.logOut = function() {
        this.loggedIn = false;
    };
});

function Ctrl1($scope, user) {
    $scope.user = user;
}

function Ctrl2($scope, user) {
    $scope.loggedIn = user.loggedIn;

    // Proxy functions

    // This wont work because of binding:
    // $scope.logIn = user.logIn;
    // $scope.logOut = user.logOut;

    // This works
    $scope.logIn = function() {
        user.logIn();
    };
    $scope.logOut = function() {
        user.logOut(); 
    };

    // This also works:
    // $scope.logIn = user.logIn.bind(user);
    // $scope.logOut = user.logOut.bind(user);

    $scope.$watch(function() {
        return user.loggedIn;
    }, function(value) {
        $scope.loggedIn = value;
    });
}

和 HTML：

<div ng-controller="Ctrl1">
    <h2>Ctrl1: Access the user service directly</h2>
    <div ng-show="user.loggedIn">
        Logged In
        <button ng-click="user.logOut()">Log Out</button>
    </div>
    <button ng-show="!user.loggedIn" ng-click="user.logIn()">Log In</button>    
</div>
<hr />
<div ng-controller="Ctrl2">
    <h2>Ctrl2: Proxy via the controller</h2>
    <div ng-show="loggedIn">
        Logged In
        <button ng-click="logOut()">Log Out</button>
    </div>
    <button ng-show="!loggedIn" ng-click="logIn()">Log In</button>  
</div>

直播：http: //jsfiddle.net/h6AR4/

将服务直接添加到范围感觉不对，但会导致控制器代码更清晰。

代理所有功能会导致控制器代码混乱。

是否有明确的“角度方式”？

4

1 回答 1

1

您上面概述的方法是“受支持的”，因为您已将整个服务绑定到$scope. 恕我直言，让您的模板“窥视”服务中定义的所有方法通常不是最好的（如果您愿意的话，我会将其标记为代码气味）。

此外，调用 AngularJS 服务（没有代理方法）现在会使应用程序的实现更加耦合和更难测试。也就是说，如果出现以下情况，遵循更精简的方法可能是有意义的：

  • 您的服务（和控制器）是轻量级和直通的，其中额外的开销（编写代理方法）是不值得的。
  • 测试（更重要的是，模拟）对您的用例不是很重要，或者代码很容易通过其他方法验证
  • 您的服务会立即返回数据（而不是延迟/承诺值）。延迟值需要一个控制器方法来处理“加载”状态以及解包 Promise 结果（当它可用时）。

总的来说，这里是 YMMV，但没有明确的原因说明直接绑定不是“正确”或“允许”的。

Pawel 有一篇很好的文章，提供了相同的选项，但社区之间的共识也是，虽然它是一个选项，但这种绑定方法很少是“正确”选项：https ://stackoverflow.com/a/15040125/283788

于 2014-04-28T17:28:21.267 回答