参数'CarouselDemoCtrl'不是函数,未定义

时间:2016-09-05 03:44:45

标签: angularjs angular-ui-bootstrap carousel

indexCtrl.js

var app = angular.module('app', ['ui.router', 'ui.bootstrap', 'ngAnimate'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;



  $scope.addSlide = function() {

  $http.get('/find').success(function(data) {

    for (var i = 0; i < data.length; i++) {
        var discovery = {};
        discovery.image = data[i].image;
        discovery.name = data[i].name;
        discovery.objectType = data[i].objectType;
        discovery.description = data[i].description;
        discovery.discoveredBy = data[i].user;
        discovery.discoveredOn = data[i].discoveredOn;
        discovery.location = data[i].location;

        $scope.discoveries.push(discovery);

    } // end of for loop

    for (var i = 0, i < 4, i++) {
        var discovery = {};
        var randNum = Math.floor(Math.random() * discoveries.length);
        slides.push({
            image = discoveries[randNum].image;
            name = discoveries[randNum].name;
            objectType = discoveries[randNum].objectType;
            description = discoveries[randNum].description;
            discoveredBy = discoveries[randNum].user;
            discoveredOn = discoveries[randNum].discoveredOn;
            location = discoveries[randNum].location;
        });
    }

});



// var newWidth = 600 + slides.length + 1;
// slides.push({
//   image: '//unsplash.it/' + newWidth + '/300',
//   // image: '../../images/jumbotron.jpg',
//   text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
//   id: currIndex++
// });
};

$scope.randomize = function() {
var indexes = generateIndexesArray();
assignNewIndexesToSlides(indexes);
};

for (var i = 0; i < 4; i++) {
  $scope.addSlide();
}

// Randomize logic below

function assignNewIndexesToSlides(indexes) {
  for (var i = 0, l = slides.length; i < l; i++) {
    slides[i].id = indexes.pop();
  }
}

function generateIndexesArray() {
  var indexes = [];
  for (var i = 0; i < currIndex; ++i) {
    indexes[i] = i;
  }
  return shuffle(indexes);
}

// http://stackoverflow.com/questions/962802#962890
function shuffle(array) {
var tmp, current, top = array.length;

if (top) {
  while (--top) {
    current = Math.floor(Math.random() * (top + 1));
    tmp = array[current];
    array[current] = array[top];
    array[top] = tmp;
  }
}

  return array;
}




}]);

我正在尝试从我的数据库中获取信息,并在演示轮播中使用四个随机对象,而不是使用角度ui bootstrap进行演示。 我目前收到此错误:“当我使用当前的$ scope.addSlide函数时,”Argument'CarouselDemoCtrl'不是函数,未定义“。但是,当我在$ scope.addSlide函数中有注释掉的部分时,它不会抛出任何错误并且工作正常。为什么这会影响我的CarouselfDemoCtrl以使其不是一个函数,我该如何修复它?同样,轮播正在工作,直到我更改了$ scope.addSlide函数。

这是我的app.js:

var app = angular.module('app', ['ui.router', 'ui.bootstrap', 'ngAnimate'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('profile', {
        url: '/profile',
        templateUrl: 'views/profile.html',
        controller: 'profileCtrl'
    })
    .state('discover', {
        url: '/discover',
        templateUrl: 'views/discover.html',
        controller: 'discoverCtrl'
    })
    .state('find', {
        url: '/find',
        templateUrl: 'views/find.html',
        controller: 'findCtrl'
    })
    .state('index', {
        url: '/index',
        templateUrl: 'views/index.html',
        controller: 'CarouselDemoCtrl'
    })

}]);

这是index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Discover It!</title>
<script src = "https://plus.google.com/js/client:platform.js" async defer></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>

<body>




<div class="container" ng-app="app">
<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
      <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Name: {{slide.name}}</h4>
          <p>{{slide.description}}</p>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="scripts/angular-animate/angular-animate.min.js"></script>
<script src="scripts/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

<script src="scripts/app.js"></script>
<script src="scripts/controllers/profileCtrl.js"></script>
<script src="scripts/controllers/discoverCtrl.js"></script>
<script src="scripts/controllers/findCtrl.js"></script>
<script src="scripts/controllers/indexCtrl.js"></script>

我已更新以添加我的代码当前所在的位置以及更多信息,因为我的问题可能来自不同的区域。

1 个答案:

答案 0 :(得分:0)

问题是我的for循环逻辑中有错误试图访问未定义的信息,这导致“Argument'CarouselDemoCtrl'不是一个函数,得到了未定义的”错误。“所以如果你得到一个错误这抱怨控制器,也试着检查你的逻辑。