从控制器中删除变量逻辑,将其移至服务中

时间:2016-07-28 18:52:04

标签: javascript angularjs

我想将变量replacers的逻辑从controllers.js中的控制器 PhraseListCtrl 移动到services.js中的 CategoryService

当前设置(工作正常)如下:

在controller.js

    function PhraseListCtrl($scope, $stateParams, CategoryService) {

      $scope.categoryId = $stateParams.categoryId;
      $scope.category = $stateParams.category;

      CategoryService.getCategoryDetail($scope.categoryId).then(function(dataResponse) {
        $scope.categoryDetail = dataResponse.data;

        var replacers = {
          '{{group}}': '<a class="button button-small button-outline button-positive button-side-padding">group</a>',
          '{{attribute}}': '<a class="button button-small button-outline button-assertive button-side-padding">attribute</a>',
          '{{factor}}': '<a class="button button-small button-outline button-assertive button-side-padding">factor</a>',
          '{{person}}': '<a class="button  button-small button-outline button-positive button-side-padding">person</a>'
        }

        console.log(replacers);

        $scope.categoryDetail.forEach(function(e) {
          Object.keys(replacers).forEach(function(key) {
            e['phrase_filter'] = e['phrase_filter'].replace(new RegExp(key, 'g'), replacers[key]);
          })
        })

      });

    }

在services.js

function CategoryService($http) {

        this.getCategoryList = function () {

            return $http({
                method: 'GET',
                url: 'http://127.0.0.1:8000/api/category/',
            });

        }


        this.getCategoryDetail = function (categoryId) {

            return $http({
                method: 'GET',
                url: 'http://127.0.0.1:8000/api/category/' + categoryId,
            });

        }

    }

然而,当我稍微移动逻辑时,我似乎无法再访问变量replacers

在controller.js

    function PhraseListCtrl($scope, $stateParams, CategoryService) {

      $scope.categoryId = $stateParams.categoryId;
      $scope.category = $stateParams.category;

      CategoryService.getCategoryDetail($scope.categoryId).then(function(dataResponse) {
        $scope.categoryDetail = dataResponse.data;

        var replacers = CategoryService.getCategoryFilter;

        console.log(replacers);

        $scope.categoryDetail.forEach(function(e) {
          Object.keys(replacers).forEach(function(key) {
            e['phrase_filter'] = e['phrase_filter'].replace(new RegExp(key, 'g'), replacers[key]);
          })
        })

      });

    }

在services.js

function CategoryService($http) {

    this.getCategoryList = function () {

        return $http({
            method: 'GET',
            url: 'http://127.0.0.1:8000/api/category/',
        });

    }


    this.getCategoryDetail = function (categoryId) {

        return $http({
            method: 'GET',
            url: 'http://127.0.0.1:8000/api/category/' + categoryId,
        });

    }

    this.getCategoryFilter = function () {

        var replacers = [{
            '{{group}}' : '<a class="button button-small button-outline button-positive button-side-padding">group</a>',
            '{{attribute}}' : '<a class="button button-small button-outline button-assertive button-side-padding">attribute</a>',
            '{{factor}}' : '<a class="button button-small button-outline button-assertive button-side-padding">factor</a>',
            '{{person}}' : '<a class="button  button-small button-outline button-positive button-side-padding">person</a>'
        }]

        return replacers;

    }

}

我做错了什么?

1 个答案:

答案 0 :(得分:1)

您将获得此行中函数的参考:

var replacers = CategoryService.getCategoryFilter;

你应该像这样调用这个函数

var replacers = CategoryService.getCategoryFilter();

应该这样做。

修改

同样,您正在为服务中的replacers创建一个数组,但您想要访问一个对象。