2016-04-11 14 views
-1

Ich arbeite an einer Anwendung, in der ich angle JS mit require JS laden will. Mein Klickereignis funktioniert nicht in meinem Code. Kann jemand pls helfen:klicken Ereignis nicht funktioniert mit angular JS und Require JS

<!DOCTYPE html> 
<html lang="en" data-ng-app="myApp"> 

    <body class="internal" > 
     <div id="contentContainer" class="stratum" data-ng-controller="appController"> 
       <div id="main-bar" class="row">     
        <div id="go" class="column column.one-quarter-"> 
          <div class="btnLabel"><label for="submitBtn"></label></div> 
          <div><button id="submitBtn" ng-click="getBarChartData()"> GO</button></div> 
        </div> 

       </div> 
     </div> 
    </body> 
    <script type="text/javascript"> 
      var contextPath = "<%= request.getContextPath() %>"; 
      var appUrl = "<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>"; 
      var isSessionExpired = false; 
     </script> 
     <!-- JavaScripts Require JS Library and App JS Files --> 
     <script type="text/javascript" data-main="<%=request.getContextPath() %>/resources/js/app/uptimeReport.js" src="<%=request.getContextPath() %>/resources/js/libs/requirejs/require.js"></script> 
     <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/app/main-built.js"></script>  
</body> 
</html> 

App.js

/*global require*/ 
'use strict'; 

require([ 
    'angular' 
], function (angular) { 
    require([ 
     'controller/environmentController' 

    ], function (appCtrl) { 
     angular. 
     module('myApp',[]). 
     controller('appController', appCtrl); 
     angular.bootstrap(document, ['myApp']);   
     console.log("in App.js"); 
    }); 
}); 

uptimeReport.js

/*global require*/ 
'use strict'; 

requirejs.config(
{ 
    /** set up any additional paths that are outside of your application base * */ 
    paths: 
    { 
     angular: contextPath + '/resources/js/libs/angularJS/angular', 
    }, 
    /** 
    * The following is not required in this example, but it is an example of 
    * how to make non-AMD java script compatible with require 
    */ 
    shim: { 
     angular: { 
      exports: 'angular' 
     } 
    }, 
    deps: ['app'] 
}); 

Controller/environmentController.js

/*global define*/ 
'use strict'; 

/** 
* The main controller for the app. The controller: 
* - retrieves and persist the model via the todoStorage service 
* - exposes the model to the template and provides event handlers 
*/ 

define([ 
    'angular' 
], function (angular) { 
    return ['$scope', '$http', 
      function($scope, $http) { 
     console.log("in controller123.js"); 
      var businessUrl="http://localhost:8080/UptimeReport/services/getBusinessAreas"; 
      var appUrl="http://localhost:8080/UptimeReport/services/getApplications"; 
      var envUrl="http://localhost:8080/UptimeReport/services/getEnvironments"; 
       $http.get(businessUrl).then(function(response) { 
       $scope.business = response.data; 
       }); 
       $http.get(appUrl).then(function(response) { 
       $scope.application = response.data; 
       }); 
        $http.get(envUrl).then(function(response) { 
       $scope.environment = response.data; 
       }); 

     }]; 

    }); 
+0

verwenden Bitte provice 'appController' Codes – kiro112

+0

den Code aktualisiert. Bitte sehen Sie sich um. –

+0

kann 'getBarChartData' in Ihrem Controller nicht finden .. versuchen Sie' $ scope.getBarChartData Funktion' in * controller/environmentController.js * – kiro112

Antwort

1

Sie die getBarChartData Funktion binden sollte in Ihrem $scope der Lage sein, Ereignis binden verwenden ng-click="getBarChartData()"

, wenn Sie nicht die Funktion der $scope banden können Sie es wie ng-click="Controller.getBarChartData()"

+0

Danke für Ihre Hilfe @ kiro112. –

+0

Willkommen @RaviSinha, aber ich denke, es ist auch schön, Antwort zu markieren :) – kiro112