$timeout is not a function angularjs

Question

I am beginner with angular js and I am trying to implement modal with hyperlink, I ham referring to this plunker

http://plnkr.co/edit/M7qfegYIOqOQekoxLaj5?p=preview

I have been able to successfully open modal on hyperlink, but i am not able to display the data returned from function, it always gives error, $timeout is not a function, I am passing an additional parameter as well from ng-click.

    <td ng-repeat="column in columns">
        <div class="animate-switch" ng-if="column == spaceIdHeaderName">
         <a href="" ng-click="open(user[column])"> {{user[column]}} </a></div>
         <div class="animate-switch" ng-if="column != spaceIdHeaderName">{{user[column]}}</div>

   </td>

My Modal js is as:

$scope.open = function ($timeout, $log, parameter1) {

           var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: ModalInstanceCtrl,
                resolve: {
                    items: function ($http) {
                        return "loadind data...";
                    }
                }
            });

            modalInstance.opened.then(function($timeout, $log) {
                $scope.loadData(modalInstance,$timeout, $log);
            }, function() {
                $log.info('Modal dismissed at: ' + new Date());
            });

            $scope.loadData = function(aModalInstance, $timeout, $log) {
                $timeout(function() {
                    aModalInstance.setItems("data loaded...");
                }, 3000);
            };

    };

        var ModalInstanceCtrl = function ($scope, $uibModalInstance, items) {
            $scope.items = items;

            $uibModalInstance.setItems = function(theData) {
                $scope.items = theData;
            };

            $scope.ok = function() {
                $uibModalInstance.close('close');
            };
            $scope.cancel = function() {
                $uibModalInstance.dismiss('cancel');
            };
        };
    });

Cant figure out why $timeout is not resolved, is it something related to parameter passing ?

Rahul Arora · Accepted Answer · 2016-06-08 03:43:11Z

2

You need to include $timeout as a dependency in your controller.

Not only that $log and $http also needs to be included.

This statement in your uibModal:

    resolve: {
            items: function ($http) {
                return "loadind data...";
            }
        }

The $scope.items = items will just assign the string "loading data..." to it. I do not know the reason you are passing this to resolve.

answered Jun 8, 2016 at 3:43

Rahul Arora

4,5431 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zeeshan Qurban · Accepted Answer · 2016-06-08 05:21:15Z

2

You need to inject $timeount,$http and $log in your Controller

angular.module('plunker', ['ui.bootstrap']);
var testCtrl = function($scope, $modal, $timeout, $log,$http) {
$scope.open = function() {
var modalInstance = $modal.open({
  templateUrl: 'testContent.html',
  controller: testCtrl,
  resolve: {
    mydata: function() {
      return "Loading...";
    }
  }
});

answered Jun 8, 2016 at 5:21

zeeshan Qurban

3871 gold badge4 silver badges15 bronze badges

Comments

Charlie · Accepted Answer · 2016-06-08 05:29:19Z

You found the solutions in other answers. Now you need to have a look inside different methods of Dependency Injection.

DI is pervasive throughout Angular. You can use it when defining components or when providing run and config blocks for a module.

Components such as services, directives, filters, and animations are defined by an injectable factory method or constructor function. These components can be injected with "service" and "value" components as dependencies.

Controllers are defined by a constructor function, which can be injected with any of the "service" and "value" components as dependencies, but they can also be provided with special dependencies. See Controllers below for a list of these special dependencies.

The run method accepts a function, which can be injected with "service", "value" and "constant" components as dependencies. Note that you cannot inject "providers" into run blocks.

The config method accepts a function, which can be injected with "provider" and "constant" components as dependencies. Note that you cannot inject "service" or "value" components into configuration.

Collectives™ on Stack Overflow

$timeout is not a function angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related