Question

如何连接服务和控制器之间的双向数据绑定？我看过几个帖子，比如How to make two-way data binding between service and controller，但我不明白答案。有人可以提供简单，高级别的解释或示例吗？我已经研究过使用$ watch，但我也注意到很多人说不应该在控制器中使用它。 Angular JS - you probably shouldn't use $watch in your controllers，这只会增加混乱，因为我不知道我会在哪里添加它。

主app.js包含的依赖项

(function() {
    'use strict';

    angular.module('myApp', [
        'ngRoute',
        'app.controller',
        'app.service',
        'component.navbar'
    ]);
})();

来自navbar组件的包含的依赖项

(function() {
    'use strict';

    /* Navbar Component */

    angular.module('component.navbar', [
        'component.navbar.controller',
        'component.navbar.directive',
        'component.navbar.service'
    ])

    .run(function( NavbarService ) {
        NavbarService.getJSON();
    });

})();

Navbar组件片段

(function() {
   'use strict';

   angular.module('component.navbar.service', [])

   .factory('NavbarService', ['$http', function( $http ) {

       var navbarJSON = [];
       var active = 0;


        var getJSON = function() {

            return $http.get('app/data/navlinks.json')
                .success( function( data ) {
                    navbarJSON = data;
                });
        }

        var getData = function(  ) {

            return navbarJSON;
        }

        var setActive = function( index ) {
            active = index;
        }

        var getActive = function() {
            return active;
        }

        return {
            getJSON: getJSON,
            getData: getData,
            setActive: setActive,
            getActive: getActive
        }

    }]);

})();

(function() {
    'use strict';

    angular.module('component.navbar.controller', [])

    .controller('NavbarController', ['$scope', 'NavbarService', function( $scope, NavbarService ) {

        $scope.navbarData = NavbarService.getJSON();

        $scope.active = NavbarService.getActive();

        $scope.setActive = function( index ) {
            //$scope.active = $scope.navbarData[index]
            NavbarService.setActive( index );
        }

    }]);

})();

Answer 1

您可能刚刚选择将服务作为$scope属性传递，然后按原样使用其方法：

<强>的Javascript

控制器的

.controller('NavbarController', ['$scope', 'NavbarService', function( $scope, NavbarService ) {

    NavbarService.getJSON();
    $scope.navbar = NavbarService;

}]);

HTML （示例）

<nav ng-controller="NavbarController">
  <a ng-repeat="link in navbar.getData()"
     ng-class="{'active': navbar.getActive() == $index}"
     ng-click="navbar.setActive($index)">
     {{link.label}}
  </a>
</nav>

Answer 2

您需要先将服务模块导入控制器模块

angular.module（'component.navbar.controller'，['component.navbar.service']）

我无法看到你在哪里调用 NavBarService.getJSON（），所以先调用它来获取数据。

Answer 3

为什么不在您的服务中公开active？如果你需要getter / setter，请使用隐式的。

关于不在控制器中使用$watch的建议。这是一个非常通用的陈述。如果$watch是正确的工具，请使用它。如果你可以使用事件监听器实现相同的目的，那就这样做。

在您的情况下，您的服务可以在根范围上广播一个事件，以指示状态的变化。您可以在控制器中侦听该事件并更新您的值，而不是使用$watch。

AngularJS如何在服务和控制器之间设置双向数据绑定

3 个答案: