标签: angularjs-controller

Angular:一次多个控制器调用服务

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

我有一个服务,进行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...
}
Run Code Online (Sandbox Code Playgroud)

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

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

谢谢,

angularjs angularjs-service angularjs-scope angularjs-controller

4
推荐指数
1
解决办法
2596
查看次数

无法在打字稿中扩展angularjs控制器

我试图使用Typescript的extends继承一个angularjs控制器.但是一旦我扩展控制器angularjs就会抛出这个错误:

错误:参数'GenericLookupCtrl'不是函数,未定义

这是我的父类和子类的简化代码:

家长:

module Controllers.SolMan
{
    export class ParentCtrl
    {
        constructor(
            seUIConfigsCacheService: Services.CrossCutting.UIConfigsCacheService,
            seHttpService: Services.CrossCutting.HttpService,
            $scope: Interfaces.IParentScope,
            genericServices: Services.CrossCutting.GenericService,
            $compile)
        {
            console.log('parent');
        }
     }
}
Run Code Online (Sandbox Code Playgroud)

儿童:

module Controllers.SolMan {

    export class ChildCtrl extends ParentCtrl {
        constructor(
            seUIQueryConfigsCacheService: Services.CrossCutting.UIConfigsCacheService,
            seHttpService: Services.CrossCutting.HttpService,
            $scope: Interfaces.IChildScope,
            genericServices: Services.CrossCutting.GenericService,
            $compile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $compile);
                console.log('Child');
        }
    }
} 
Run Code Online (Sandbox Code Playgroud)

以下是控制器的注册方式:

.controller('ParentCtrl', Controllers.ParentCtrl)
.controller('ChildCtrl', Controllers.ChildCtrl)
Run Code Online (Sandbox Code Playgroud)

我可以使用控制器的纯angularjs继承,但是从子调用父方法我必须扩展子节点,因为否则typescript会给出错误,它无法在父节点中找到该方法.

javascript inheritance angularjs typescript angularjs-controller

4
推荐指数
1
解决办法
3429
查看次数

angularjs - 如何根据其中一个属性的值在控制器中获取ng-repeat过滤器中项目的索引?

我在我的html文件中使用ng-repeat来显示过滤的项目:

<li ng-repeat="item in (filteredItems = (items | filter:query))">
  {{ item.name }}
</a>
Run Code Online (Sandbox Code Playgroud)

在控制器中,我想根据他的一个属性获取项目的索引.

精度:我想在过滤列表中获取索引,而不是在整个列表中.

例如,这将是女巫名称的索引some_item_7.

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

app.controller('MyCtrl', ['$scope',
  function MyCtrl($scope) {

    $scope.query = 'some';

    $scope.items = 
    [
      { name: 'some_item_1' },
      { name: 'another_item_2' },
      { name: 'some_item_3' },
      { name: 'another_item_4' },
      { name: 'some_item_5' },
      { name: 'another_item_6' },
      { name: 'some_item_7' },
      { name: 'another_item_8' },
      { name: 'some_item_9' }
    ];

    $scope.itemNext = function (item) { …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-ng-repeat angularjs-controller

4
推荐指数
1
解决办法
1万
查看次数

AngularJS $http 在多个控制器中使用响应

我有一个应用程序,我在其中加载一堆专辑,然后当用户单击每个专辑时,他们会获得专辑的详细信息,例如歌曲等。现在我正在从数据库中提取数据,但做了两次, 一次在 ProjectsCtrl 中显示所有专辑,然后在 ProjectsDetailCtrl 中再次显示单个专辑信息。我觉得有一种更快的方法可以做到这一点,但无法弄清楚如何从第一次保存数据以再次在第二个控制器中使用

(function() {
    var app = angular.module('chp', ['ngRoute', 'projectControllers']);

    app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'partials/directory.html',
            controller: 'ProjectsCtrl'
          }).
          when('/album/:slug', {
            templateUrl: 'partials/album.html',
            controller: 'ProjectDetailCtrl'
          }).
          otherwise({
            redirectTo: '/'
          });
      }]);

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

    projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
      function ($scope, $http) {
        $http.get('/get_albums').success(function(albums) {
            $scope.projects = albums;
            $scope.filters = { };
        });
      }]);



    projectControllers.controller('ProjectDetailCtrl', ['$scope', '$http', '$routeParams', '$sce',
      function($scope, $http, $routeParams, $sce) {


        $http.get('/get_albums').success(function(albums) {
            $scope.projects = albums;

            for(var i = 0; i …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-controller angularjs-http

4
推荐指数
1
解决办法
847
查看次数

AngualrJS $ http返回undefined?

根据AngularJS,我$http通过我的控制器的服务调用返回undefined?

这里似乎有什么问题?我试图返回调用的数据,但一旦传递给控制器​​,数据变得不确定?

JavaScript的

var myStore = angular.module('myStore', [])

    .controller('StoreController', ['$scope', 'dataService', function ($scope,  dataService) {
      $scope.products = dataService.getData();
    }])

    .service('dataService', ['$http', function($http) {
      this.getData = function() {
        $http.get('assets/scripts/data/products.json')
              .then(function(data) {
                return data;
              });
      };
    }]);
Run Code Online (Sandbox Code Playgroud)

HTML

<div class="content">
  <ul>
    <li ng-repeat="product in products.products">{{product.productName}}</li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

我的理解是$http,$q$resource所有的回报承诺,但我想我已经覆盖了与.那么.

javascript angularjs angularjs-controller angular-promise

4
推荐指数
1
解决办法
3112
查看次数

在AngularJS中定义控制器时,为什么不使用显式注释?

我是AngularJS的新手,并且学习了两种编写控制器函数的方式.似乎有人不使用显式注释的唯一原因是节省时间,这似乎不是一个好理由.并且能够缩小/混淆代码似乎是我想要保留在任何应用程序中的要求.

另请注意,我不是问哪个更好还是要求辩论.我问的是什么原因(或在什么情况下)使用显式注释会更有益.

我在说什么的例子:

module('myApp').controller('MyController', function($scope) {});
Run Code Online (Sandbox Code Playgroud)

module('myApp').controller('MyController', ['$scope', function($scope) {}]);
Run Code Online (Sandbox Code Playgroud)

javascript dependency-injection angularjs angularjs-controller

4
推荐指数
1
解决办法
1977
查看次数

控制器在Ionic中被调用两次(AngularJS)

在我的角度项目中,用户接受EULA,然后自动重定向到他们的仪表板,但是,在此重定向上,DashboardController似乎被调用了两次,DashboardController正在路由本身被调用,我已经检查过我是否有意外在模板中再次调用它,但我没有.以下是我的路线和控制器.如果我直接或通过EULA控制器上的重定向访问URL似乎没有关系,我得到相同的结果.

路线

.config(function($httpProvider, $stateProvider, $urlRouterProvider) {

    $httpProvider.interceptors.push('httpRequestInterceptor');

    $urlRouterProvider.otherwise('/');

    $stateProvider

    .state('login', {
        url: '/',
        templateUrl: 'templates/login.html',
        data: {
            requireLogin: false
        }
    })
    .state('eula', {
        url: '/eula',
        templateUrl: 'templates/eula.html',
        data: {
            requireLogin: true
        }
    })
    .state('dashboard', {
        url: '/groups',
        templateUrl: 'templates/dashboard.html',
        data: {
            requireLogin: true
        }
    })
});
Run Code Online (Sandbox Code Playgroud)

控制器:

App.controller('DashboardController', ['$scope', 'RequestService', '$state', '$rootScope', function($scope, RequestService, $state, $rootScope){

alert('test');

}]);
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

根据评论添加我的HTML

的index.html

<body ng-app="App">

<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
        <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view class="slide-left-right"></ion-nav-view>
    <ui-view></ui-view>
</body>
Run Code Online (Sandbox Code Playgroud)

dashboard.html

<div class="groups" ng-controller="DashboardController">
    <ion-view …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-routing angularjs-controller ionic-framework

4
推荐指数
2
解决办法
6031
查看次数

如何在Controller As语法中使用带有范围的Ionic Popup?

我有一个使用Controller作为语法的Angular控制器设置,我需要从一个方法创建一个带有绑定数据字段的Ionic Popup.我无法弄清楚的是如何为数据绑定设置弹出窗口的范围.我找到了这个例子但是使用this和$ scope对我来说似乎很麻烦.有没有更好的方法来做到这一点,还是我应该回到$ scope方法?

我的控制器看起来像这样(标有问题):

.controller('AccountCtrl', function ($ionicPopup) {
    // Properties ===========
    this.resetData = {};

    // Methods ==============
    this.forgotPassword = function () {
        var myPopup = $ionicPopup.show({
            template: '<input type="text" ng-model="<What goes here?>.resetData.resetEmail">',
            title: 'Please enter your e-mail address',
            scope: <What goes here?>
            buttons: [
                {
                    text: 'Submit',
                    onTap: function (e) {
                        console.log("Password reset:" + <What goes here?>.resetData);
                    }
                },
                { text: 'Cancel' }
            ]
        });
    }
})
Run Code Online (Sandbox Code Playgroud)

我的模板看起来像:

<ion-view view-title="Sign In">
    <ion-content has-bouncing="false" ng-controller="AccountCtrl as account">
        <a …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-controller ionic

4
推荐指数
1
解决办法
5907
查看次数

angular js指令中的"controller as"名称与父控制器中的函数相同

我有一个带有一些项目的控制器,ng-repeat每个项目应该得到一个随机颜色,所以我使用ng-style该控制器中的一个函数调用randColor(...).

app.controller('TestController', function() {
    var vm = this;

    vm.items = [ { name: 'item 1' } , { name: 'item 2'} ];

    vm.randColor = function (item) {
        if (!item) {
            return 'red';
        }
        else if (!item.color)
        {
            var color = 'rgb('
                + _.random(0, 255) + ','
                + _.random(0, 255) + ','
                + _.random(0, 255) + ')';
            item.color = color;
        }

        return item.color;
    };
});
Run Code Online (Sandbox Code Playgroud)

我正在使用"控制器为"语法,我通常总是使用vm我的控制器的短名称.即使以同样的方式命名"子"控制器,我也从来没有遇到过这样的问题.

但是现在我已经尝试用指令做同样的事情,突然我的randColor(...)功能停止了工作.

这是我的问题的一个问题. …

javascript angularjs angularjs-directive angularjs-controller

4
推荐指数
1
解决办法
1651
查看次数

如何使用AngularJs从文本框中检索值?

$scope.add=function()
                {
                    //How to retrieve the value of textbox
                }

<input type='text'><button ng-click='add()'></button>
Run Code Online (Sandbox Code Playgroud)

当我单击按钮时,如何检索控制器中的文本框值并动态地将该值添加到表中?

javascript angularjs angularjs-controller angularjs-ng-click angular-ngmodel

4
推荐指数
1
解决办法
3万
查看次数