javascript - 如何在angularjs中调用服务

Question

(function() {
    'use strict';
    angular
        .module('autocompleteCustomTemplateDemo', ['ngMaterial'])
        .controller('DemoCtrl', DemoCtrl);

    function DemoCtrl($timeout, $q, $log, $scope, $http) {
        var self = this;
        $scope.service_details = [];



        $scope.productdetail == [];

        $scope.add = function() {
            $scope.show_servicelist = true;
            $scope.type = function(e) {
                alert(e);
            }
            $scope.service_details.push(JSON.parse($scope.productdetails));
        }
        self.simulateQuery = false;
        self.isDisabled = false;

        self.repos = loadAll();
        self.querySearch = querySearch;
        self.selectedItemChange = selectedItemChange;
        self.searchTextChange = searchTextChange;


        function querySearch(query) {
            var results = query ? self.repos.filter(createFilterFor(query)) : self.repos,
                deferred;
            if (self.simulateQuery) {
                deferred = $q.defer();
                $timeout(function() {
                    deferred.resolve(results);
                }, Math.random() * 1000, false);
                return deferred.promise;
            } else {
                return results;
            }
        }

        function searchTextChange(text) {
            $log.info('Text changed to ' + text);
        }

        function selectedItemChange(item) {
            $log.info('Item changed to ' + JSON.stringify(item));
            $scope.productdetails = JSON.stringify(item);
        }


        function loadAll() {
            var repos = [{
                    'product_gid': '1',

                    'product_name': 'stabilizer',
                    'forks': '16,175',
                }, {
                    'product_gid': '2',

                    'product_name': 'stand',
                    'forks': '760',
                }, {
                    'product_gid': '3',

                    'product_name': 'ac',
                    'forks': '1,241',
                },

            ];
            return repos.map(function(repo) {
                repo.value = repo.product_name.toLowerCase();
                return repo;
            });
        }


        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(item) {
                return (item.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();

app.service("productservice", function($http) {
    this.getproduct = function() {
        deggure
        var response = $http.get("/Productjson/");
        return response;
    }
});

我正在显示用于列表自动完成的 angularjs 文件，现在我添加了新的服务文件来获取一些数据。我想将服务数据发送到应用程序代码中，我不知道如何将服务与 Controller 代码连接。当我尝试时连接我有语法错误。请修改代码并指导我获取服务数据。

Answer 1

这是一个完整的示例，向您展示如何在带有 Controller 的 angularjs 中使用 service:

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

app.controller("ctrl", function($scope, service) {

  $scope.alert = function() {
    service.alert();
  }

  $scope.console = function() {
    service.console();
  }
})

app.service("service", function() {
  this.alert = function() {
    alert("hey")
  }

  this.console = function() {
    console.log("hey")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <button ng-click="alert()">alert</button>
  <button ng-click="console()">console</button>
</div>