0

我是AngularJS的新手,面對這個錯誤,我從同一個錯誤的所有Stackoverflow引用中獲得幫助,但未能解決我在此處發佈的問題。代碼工作正常,只要我整合了plivo模塊,它就開始提供以下錯誤。 enter image description here錯誤:[ng:areq]參數'addCtrl'不是一個函數,沒有定義

請幫我解決這個問題,已經浪費了1天。謝謝。

addCtrl.js

// Creates the addCtrl Module and Controller. Note that it depends on 'geolocation' and 'gservice' modules. 
var addCtrl = angular.module('addCtrl', ['angularModalService']); 
addCtrl.controller('addCtrl', function($scope, $http, $rootScope, $location,$routeParams, $q , $timeout , plivoclient, ModalService){ 

    // Initializes Variables 
    // ---------------------------------------------------------------------------- 
    $scope.formData = {}; 
    $scope.formData.preferredMode = "data"; 
    $scope.formData.emailId = "[email protected]"; 
    $scope.formData.phone = "+919986040933"; 

    $scope.$on('incoming:call', function(event, data) { 
      console.log('Instance Id: ' + data.extraHeaders['X-Ph-Instid']); 
      $timeout(function() { 
       ModalService.showModal({ 
        templateUrl: 'partials/addForm.html', 
        controllerAs: 'vm', 
        controller: 'IncomingCallController', 
        inputs: { 
         from: data.callerName || '', 
         instId: data.extraHeaders['X-Ph-Instid'] || data.extraHeaders['X-Ph-instid'] 
        } 
       }); 
      }, 0); 
     }); 


    function activate(){ 
     console.log("activate in addCtrl is called.."); 
     callResolver(); 
    } 

    activate(); 

    var param1 = $routeParams.param1; 
    var param2 = $routeParams.param2; 

    console.log(param1); 
    console.log(param2); 

    // submitting new user Details 
    $scope.submitUserDetails = function() { 

     var userData = { 
      emailId: $scope.formData.emailId, 
      preferredMode: $scope.formData.preferredMode, 
      phone: $scope.formData.phone, 
      alternatePhone: $scope.formData.alternatePhone, 
     }; 

     console.log('in normal add user :'+JSON.stringify(userData)); 

     // Saves the user data to the db 
     saveUserData(userData); 
    }; 


    function saveUserData(userData){ 
     $http.post('/users', userData) 
      .success(function (data) { 
       $location.path('/submitted'); 
      }) 
      .error(function (data) { 
       console.log('Error: ' + data); 
      }); 
    } 

    function callResolver() { 
     console.log("call resolver is called.."); 
      var deferred = $q.defer(); 
      var sessionUser= { 
       "plivo_sip_credentials": { 
        "username": "N919986040933160719091504", 
        "password": "now1516confer", 
        "endpoint_id": "95086867054112", 
        "sip_uri": "sip:[email protected]" 
       } 
      }; 
      plivoclient.start(sessionUser).then(function() { 
       console.log("Plivo client connected.."); 
       deferred.resolve(); 
      }, function() { 
       console.log("Plivo client cannot be connected.."); 
       deferred.reject(4); 
      }); 
      return deferred.promise; 
     }; 

}); 

app.js

// Declares the initial angular module "NowConfer". Module grabs other controllers and services. 
var app = angular.module('nowconfer', ['ngRoute' , 'addCtrl']) 

    // Configures Angular routing -- showing the relevant view and controller when needed. 
    .config(function($routeProvider){ 

     // Join Team Control Panel 
     $routeProvider.when('/join/:param1/:param2', { 
      controller: 'addCtrl', 
      templateUrl: 'partials/addForm.html', 

     // Find Teammates Control Panel 
     }). 
     when('/submitted', { 
      template: '<div>Thankyou for choosing the preferred mode of call.</div>', 
     // Find Teammates Control Panel 
     }).otherwise({redirectTo:'/join'}) 
    }); 

的index.html

<!doctype html> 
<!-- Declares NowConfer as the starting Angular module --> 
<html class="no-js" ng-app="nowconfer"> 
<head> 
    <meta charset="utf-8"> 
    <title>NowConfer</title> 
    <meta name="description" content="NowConfer"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- CSS --> 
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"/> 
    <link rel="stylesheet" href="style.css"/> 

    <!-- JS Source --> 
    <script src="../bower_components/jquery/dist/jquery.js"></script> 
    <script src="../bower_components/angular/angular.js"></script> 
    <script src="../bower_components/angular-route/angular-route.js"></script> 
    <script src="lib/angular-modal-service.js"></script> 
    <script type="text/javascript" src="https://s3.amazonaws.com/plivosdk/web/beta-rc2/plivo.min.js"></script> 

    <!-- Angular Files --> 


    <script src="js/app.js"></script> 
    <script src="js/plivoservice.js"></script> 
    <script src="js/addCtrl.js"></script> 
    <script src="js/inject-plivo-directive.js"></script> 
    <script src="js/incoming.controller.js"></script> 
    <script src="js/callresolver.js"></script> 


</head> 

<body> 
<div class="container"> 
    <!-- Header Menu. Note use of headerCtrl --> 
    <div class="header" ng-controller="addCtrl"> 

     <!-- Header items are made active upon selection --> 
     <ul class="nav nav-pills pull-right"> 
      <li ><a href="/#/join">Prateek</a></li> 
     </ul> 

     <!-- Header Title --> 
     <h3 class="text-muted"><img src="images/l_nowconfer_logo.png" alt="NowConfer" /></h3> 
    </div> 

    <!-- Map and Side Panel --> 
    <div class="row content"> 

     <div ng-view></div> 

    </div> 
    <hr/> 

    <!-- Footer --> 
    <div class="footer"> 
     <p class="text-center"><span class="glyphicon glyphicon-check"></span> Design & developed by <a href="#">ComVerg Technologies Pvt. Ltd.</a></p> 
    </div> 

</div> 

</body> 
</html> 

個incoming.controller.js

(function() { 
    'use strict'; 

    angular 
     .module('nowconfer',['ngRoute']) 
     .controller('IncomingCallController', IncomingCallController); 

    IncomingCallController.$inject = ['$rootScope','plivoclient','$routeProvider','$location']; 

    function IncomingCallController($rootScope , plivoclient,$routeProvider ,$location) { 
     var vm = this; 
     vm.from = from; 
     vm.connecting = false; 

     vm.accept = function() { 
      plivoclient.conn.answer(); 
      vm.connecting = true; 
      console.log("incoming call accept"); 
     }; 

     vm.hangUp = function() { 
      plivoclient.conn.reject(); 
      console.log("incoming call hangedup"); 
     }; 

     $rootScope.$on('incoming:call:answered', function() { 
      console.log("incoming call answered"); 
      $location.path('/join/1/2'); 
     }); 

     $rootScope.$on('incoming:call:cancelled', function() { 
      console.log("incoming call cancelled"); 
     }); 
    } 

}()); 

callresolver.js

(function() { 

    'use strict'; 

    angular 
     .module('nowconfer') 
     .factory('callResolver', callResolver); 

    callResolver.$inject = ['$q','plivoclient']; 

    function callResolver($q, plivoclient) { 
     var deferred = $q.defer(); 
     var sessionUser= { 
       "plivo_sip_credentials": { 
       "username": "N919986040933160719091504", 
       "password": "now1516confer", 
       "endpoint_id": "95086867054112", 
       "sip_uri": "sip:[email protected]" 
      } 
      }; 
     plivoclient.start(sessionUser); 
     deferred.resolve(); 
     return deferred.promise; 
    }; 

})(); 
+0

閱讀閱讀這些行'var addCtrl = angular.module('addCtrl',['angularModalService']); addCtrl.controller('addCtrl')'您正在將'addCtrl'定義爲模塊,然後作爲控制器 – Satpal

回答

0

嘗試重命名模塊名稱從addCtrladdCtrlModule什麼的。我認爲模塊名稱與控制器名稱衝突。

只需將addCtrl.js中的這一行代碼更改爲以下內容即可。

var addCtrl = angular.module('addCtrlModule', ['angularModalService']); 

app.js

var app = angular.module('nowconfer', ['ngRoute' , 'addCtrlModule']) 

希望它能幫助。

+0

抱歉,仍然無法工作,按腳本順序出現問題 – Pratswinz

+0

嘗試更改命令put'''down'callresolver.js'後 –

+0

@Pratswinz任何成功?? –

0

模塊和控制器命名不成問題 check this codepen。提示問題是按照加載腳本的順序。我建議你快速閱讀這個John Papa Angular Style Guide以避免將來出現類似的問題。

並且代碼證明模塊名稱可以與控制器名稱相同。

(function(){ 
    'use strict'; 
    angular.module('addCtrl', []) 
    .controller('addCtrl', ctrl); 

    function ctrl(){ 
    this.test = 'Hello'; 
    } 

    angular.module('nowconfer', ['addCtrl']); 
})(); 
+0

抱歉,它沒有幫助 – Pratswinz

+0

嘗試重構您的代碼。將你的模塊封裝在IIFE中,再次檢查html中的腳本順序在你的html app.js中,上面是addCtrl.js,app.js應該是上次加載的腳本。 – Rithala

0

首先你不需要爲控制器創建一個模塊,因爲它不是注射控制器。你可以做

angular.module('nowconfer').controller('addCtrl', function(){ 
     ....... 
}) 

其次,如果要創建一個模塊,並在你的應用程序配置注入然後確保它的依賴已經加載。所以在app.js之前加載你的模塊。

希望這有助於!

相關問題