Angular JS on ng-change Issue

时间:2017-10-13 12:20:51

标签: javascript angularjs jqwidget

我有2个带有不同ng-app模块和不同控制器的Java脚本文件。 我已将这两个文件导入一个html。 on-click和on-init数据在浏览器中得到更新。但是在日期更改时,更新的数据来自服务器 $ scope.crr 正在更新但未在浏览器中显示。请让我知道我错过了什么。

File 1:controller.js
var helloAjaxApp = angular.module("myApp", []);
helloAjaxApp.controller("MenuCtrl", [ '$scope', '$http', function($scope, $http) {
	 
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";

    $scope.getmenu = function() {
        $http({
            url : 'menu',
            method : "GET"
        }).then(function(response) {
           
            $scope.menus = response.data;
            
        });
 
    };
} ]);

helloAjaxApp.controller("BranchCtrl", [ '$scope', '$http', function($scope, $http) {
	 
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";

    $scope.getbranch = function() {
        $http({
            url : 'branch',
            method : "GET"
        }).then(function(response) {
           
            $scope.branch = response.data;
            
        });
 
    };
} ]);

var today = new Date();
var dd = null;
var mm = null; 
var yyyy=null;
if(today.getDate()<10)
    {
        dd="0"+today.getDate();
    }
    else
        {
       dd=today.getDate();
        }
    
if(today.getMonth()+1<10)
    {
        mm=today.getMonth()+1;
        mm='0'+mm;
    }
    else
        {
          mm=today.getMonth()+1;
        }
yyyy = today.getFullYear();
var date=yyyy+'-'+mm+'-'+dd;
helloAjaxApp.controller("CrrdayCtrl", [ '$scope', '$http', function($scope, $http) {
	 $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
    $scope.getcrrday = function() {
    	 var x;
    	 if(typeof($scope.date)!="undefined")
    		 {
    		 var a=JSON.stringify($scope.date);
    		 $scope.x=a;
        	 }
    	 else
    		 {
    		 $scope.x=date;
    		 }
        $http({
            url : 'crrday',
            method : "POST",
            data : {
                'date' : $scope.x+''
            }
        }).then(function(response) {
        
        		 $scope.crr = response.data;
        	
           
    });
 };
}]);

helloAjaxApp.controller('mytime', function($scope, $interval) {
	  $scope.theTime = new Date().toLocaleTimeString();
	  $interval(function () {
	      $scope.theTime = new Date().toLocaleTimeString();
	  }, 1000);
	});
	
  
  
File 2:JQcontroller.js
var today = new Date();
var dd = null;
var mm = null; 
var yyyy=null;
if(today.getDate()<10)
    {
        dd="0"+today.getDate();
    }
    else
        {
       dd=today.getDate();
        }
    
if(today.getMonth()<10)
    {
        mm=today.getMonth();
        mm='0'+mm;
    }
    else
        {
          mm=today.getMonth();
        }
yyyy = today.getFullYear();
var JQDemo = angular.module("jq", ["jqwidgets"]);
JQDemo.controller("dateController", function ($scope) {
    $scope.dateInputSettings =
    {
       
        width: 200,
        height: 30
    }
    $scope.date = new Date(yyyy, mm, dd);
});

  
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>X</title>
<script type="text/javascript" src="JQ/scripts/angular.min.js"></script>
<script type="text/javascript" src="JQ/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="JQ/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQ/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQ/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="JQ/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="JQ/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="JQ/jqwidgets/jqxangular.js"></script>
<script type="text/javascript" src="JQ/scripts/demos.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/JQControllers.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<link rel="stylesheet" type="text/css" href="JQ/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" type="text/css" href="css/test.css" />
<script>
//angular.bootstrap(document.getElementById("App2"), ['jq']);
angular.module("CombineModule", ["myApp", "jq"]);
</script>
</head>
<body>
<h1 align="center">Enrollment System</h1>
<div ng-app="CombineModule"> 
   <div ng-init="getmenu()" ng-controller="MenuCtrl" >
      <nav id="main_nav">
        <ul>
          <li ng-repeat="menu in menus"><a href="{{menu.url}}">{{menu.name}}</a>
            <ul>
              <li ng-repeat="submenu1 in menu.submenus"><a href="{{submenu1.url}}">{{submenu1.name}}</a>
                <ul>
                  <li ng-repeat="submenu2 in submenu1.submenus"><a href="{{submenu2.url}}">{{submenu2.name}}</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      
   <div ng-controller="mytime"> 
   <h4 align="right"><a href="Login.html">Logout</a></h4>
<h3 align="right">{{theTime}}</h3>
</div>  
      
    </div>  
      
 <div  id="widgets" align="left"> 
 <table class="outer">
 
 <tr><td style="color:white;">Quick Status</td></tr>
 <tr>
 
    <td>
    <div ng-init="getbranch()" ng-controller="BranchCtrl">
 <table class="inner">
 <th><button ng-click="getbranch()"><img  align="right" src="images/refresh.jpg" alt="refresh" height="16" width="16"></button>Branch Details</th>
   <tr> <td>
Locations
 </td></tr>
  <tr> <td>
{{branch.locations}}
 </td></tr>
  <tr> <td >
Registered BC/Agents
 </td></tr>
  <tr> <td>
{{branch.bc}}
 </td></tr>
  <tr> <td>
Active BC`s
 </td></tr>
  <tr> <td>
{{branch.activebc}}
 </td></tr>
 </table>
 </div>
 </td>
 
  <td>
  <div ng-init="getcrrday()" ng-controller="CrrdayCtrl">
 <table class="inner">
  <th><button ng-click="getcrrday()"><img  align="right" src="images/refresh.jpg" alt="refresh" height="16" width="16"></button>Today`s Analysis</th>
  <tr>
  <td>
  <div ng-controller="dateController">
  <div ng-controller="CrrdayCtrl">
  <jqx-date-time-input ng-model="date" jqx-settings="dateInputSettings" data-ng-change="getcrrday()"></jqx-date-time-input>
  </div>
  </div>
  </td>
  </tr>
  <tr> <td>
Enrollments
 </td></tr>
  <tr> <td>
{{crr.enrollments}}
 </td></tr>
   <tr> <td>
Accounts Opened
 </td></tr>
  <tr> <td>
{{crr.accountsopened}}
 </td></tr>
 </table>
 </div>
</td>
</tr>
</table>
</div> 
</div> 
</body>
</html>

0 个答案:

没有答案