标签: angularjs-service

这应该是一个相当直接的问题,但我很难过.

我有一个服务,进行http调用,然后对结果进行广泛的后处理.我希望将处理结果分配给$ scope.variable并在几个不同的视图中使用.问题是我为每个视图都有单独的控制器,但我不希望每个控制器调用服务以从资源获取相同的数据并为每个控制器进行一次后处理.

超级简化我有这个:

myModule.factory ('Data', function ($http, $q) {
  getData: $http.get...
  processData: this.getData().success(function(data){
    ... do a ton of cpu intensive processing ... 
    return processed_data
ctrl1 = function(Data,$scope) {
  $scope.data = Data.processData()
  }
ctrl2 = function(Data,$scope) {
  $scope.data = Data.processData()
etc...
}

显然我想设置$ scope.data = Data.processData()一次,并让它填充所有控制器.就目前而言,每个控制器都独立调用服务,这会产生不必要的流量和CPU.

我确信有一些简单的东西,但我无法弄清楚.有没有办法创建一个"超级"范围,我可以定义所有控制器范围共有的变量？

谢谢,

我的服务NavData

angular.module('navData', []).
    factory('NavData', function() {
        var navData = {};
        navData.depth = 0;
        navData.category_id = "";
        navData.category_name = "";
        navData.subcategory_id = "";
        navData.subcategory_name = "";
        return navData;
    });

在某些页面上从ui-router接收值:

  var category = { 
    name: 'category',
    parent: site,
    url: '/categories/:category_id',
    onEnter: function(NavData, $stateParams){
      NavData.depth = 1;
      NavData.category_id = $stateParams.category_id;
      console.log(NavData);         
    },
    views: {
      'navigation': {
      templateUrl: 'partials/category-menu.html'
      },
      'content': {
      templateUrl: 'partials/category-images.html'
      }
    }
  };

出现在所有页面上的指令应该监视服务中的更改并将其反映在自定义的痕迹导航功能中:

  .directive('breadcrumb', ['NavData', function(NavData){
    return {
      templateUrl: 'partials/breadcrumb.html',
      link: function(scope, elm, attrs, ctrl){
        scope.depth            = NavData.depth; …

我有这个工厂:

factory('getJson', ['$resource', function($resource) {
    return $resource('json/greetings.json', {}, {
      query: {method:'GET', isArray:true}
    });
  }]);

该文件是硬编码的'greetings.json',我希望工厂根据我视图中的复选框获取文件:

<li><input type="checkbox" ng-model="includeVeggies" />Veggies</li>
<li><input type="checkbox" ng-model="includeGreetings" />Greetings</li>

知道我该怎么做？

什么是宣布服务的最佳方式我发现这2种不同的方式我似乎无法看出差异:第一种方法:

angular.module('app', [])
   .factory('Data', ['$http',function($http){
     return {
         get: function(fileName,callback){
              $http.get(fileName).
              success(function(data, status) {
                  callback(data);
              });
         }
     };
   }]);

第二种方法:

angular.module('app', [])
   .factory('Data', ['$http', function($http){
     var Url   = "data.json";
     var Data = $http.get(Url).then(function(response){
       return response.data;
     });
     return Data;
   }]);

哪一个更好,为什么？提前致谢.

我$watch对AngularJS中的语法有点困惑.

给定一个变量$scope.foo,初始值为[1,2,3],并且update使它现在等于[1,2].我想要一个函数在每次$scope.foo更新时运行,$scope.foo如arg.

我如何在AngularJS中执行此操作？

我有一个问题,寻求建议,如何将存储在服务数组中的数据提供给控制器,因为在1.2中删除了解包承诺.

例:

1. 路线1包含物品清单
2. 路由二包含一个表单来添加新项目
3. 从路线牵引中保存项目后,用户将重定向回路线1.

当路由1初始加载时,服务将向服务器请求项目,将项目存储在服务中的数组中,因此在此之后路由1的每个请求将返回一个数组.保存项目时,该项目被推送到服务中的数组.

如果我在初始加载时等待路由器1的控制器中的承诺,没有问题,因为响应被发回,但是之后路由一个的每个请求都会返回错误,因为我返回了一个数组.

关于如何在1.2中完成这样的事情的任何想法？

app.factory('Items',function($http) {
    var items = [];
    return {
        list: function() {
            if (items.length == 0) {    // items array is empty so populate it and return list from server to controller
                return $http.get('/?items').then(function(response) {
                    items = response.data.items;
                    return response.data.items;
                });
            }
            return items;   // items exist already so just return the array
        },
        save: function(item) {
            return $http.post('/',{item:item}).then(function(response) {
                items.push(item);
                return response;
            });
        }
    }
});

app.controller('RouteOne',function($scope,Items) {
    Items.list().then(function(response) {
        $scope.items = …

所以我run在angularjs中有这个功能(运行AngularJS v1.2.26)

.run(function(....) {
    authService.authCheck();

    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        if (next.requireLogin) {
            if (!authService.isLoggedIn()) {
                $location.path('/login');
                event.preventDefault();
            }
        }
    });

})...

当直接访问需要身份验证的URL时,例如http://127.0.0.1:8080/secret,该函数总是重定向到登录路径,在调试它一段时间后,它会一直评估为false.访问默认页面然后转到指定的路由它运行没有任何问题.

这是我的一部分 authService

this.authCheck = function() {
    $http({
        method: 'PUT',
        url: '/api/login'
    }).
    success(function(data, status, headers, config) {
        if (status === 200) {
            userIsAuthenticated = true;
        } else {
            userIsAuthenticated = false;
        }
        $rootScope.loginStatus = userIsAuthenticated;
    }).
    error(function(data, status, headers, config) {
        userIsAuthenticated = false;
        $rootScope.loginStatus = userIsAuthenticated;
    });
};

this.isLoggedIn = function() { …

我在我的角度js应用程序中收到此错误,无法弄清楚导致问题的原因.这似乎是一个常见的问题,但我的所有故障排除都没有帮助.如果任何人都可以指出问题可能会受到赞赏.谢谢 :)

错误:[$ injector:unpr]未知提供者:ResultsServiceProvider < - ResultsService < - ResultsController

这是我的代码:

app.js

   angular.module('resultsApp', ['ngRoute', 'nvd3', 'ngResource'])
   .config(['$routeProvider', function($routeProvider) {
       $routeProvider.when('/results', {
       controller: 'ResultsController',
        templateUrl: 'app/results/Results.html'
      });
   }])

调节器

    angular
          .module('resultsApp')
          .controller('ResultsController', ResultsController);

   function ResultsController($scope, ResultsService) {
      $scope.teams = [{teamA: ''}, {teamB: ''}];
      $scope.premResults = [];

      $scope.searchByTeams = function () {
      ResultsService.getResultsList($scope.teams.teamA,$scope.teams.teamB,   function (res) {
      $scope.premResults = res;
    );
  };
}

服务:

angular
.module('resultsApp')
.service('ResultsService', ResultsService);

    function ResultsService(ResultFactory) {

        this.getResultsList = getResultsList;

        function getResultsList(teamA, teamB, callback) {
            return ResultFactory.get({teamA: teamA, teamB: …

我很难从Angular服务中公开属性.在下面的示例中,我将公开两个属性authService:isAuthenticated和user.但是当isAuthenticated改变时,它没有被拾取HomeController.有人能帮我理解我哪里错了吗？

(function() {
    'use strict';

    // Define the 'app' module
    angular.module('app', []);

    // Use the 'app' module
    angular
        .module('app')
        .controller('LoginController', LoginController)
        .controller('HomeController', HomeController)
        .factory('authService', authService);


    // ----- LoginController -----
    LoginController.$inject = ['authService'];
    function LoginController(authService) {

        var vm = this;
        vm.username = null;
        vm.password = null;
        vm.login = login;

        function login() {
            authService.login(vm.username, vm.password);
        }
    }


    // ----- HomeController -----
    HomeController.$inject = ['$scope', 'authService'];
    function HomeController($scope, authService) {

        var vm = …

我最近在我们的应用程序中将所有模态指令切换到Angular-ui-Bootstrap模态.好多了,但是遇到了一种新的模态,它在mouseleave上关闭而不是取消点击.

this.leaveTag = (tag) => {
    TagHover.off();
};

this.hoverTag = (tag) => {
    TagHover.display();
};

上面是调用TagHover Factory内部函数的视图逻辑.

下面是Factory,TagHover.display与我们的其他模态一样正常,但我正在尝试用的leaveTag > TagHover.off是调用modal.close.到目前为止没有工作.

我的问题是你如何调用TagHoverController中的close功能,或者close我的tagsPanel组件中的$ uibModal - > TagsHover Factory？(不使用$ scope或$ rootScope事件)

我不是试图close/cancel从TagHover Ctrl范围内调用,而是尝试close从Parent范围调用.

const TagHover = angular.module('tickertags-shared')
    .controller('TagHoverController', TagHoverController)
    .factory('TagHover', factory);

TagHoverController.$inject = [
    'TagHover'];

function TagHoverController(
    TagHover) {

    this.$onInit = () => {
        console.log('TagHover onInit')
    };

    this.cancel = () => this.$close();
}

factory.$inject = ['$uibModal'];

function factory($uibModal) {

    const display = () => { …