这是我的HTML代码
<!-- Main content -->
<section class="content">
<!-- Main row -->
<div class="row">
<!-- Left col -->
<div class="col-sm-9">
<div class="box box-danger">
<div class="box-header with-border">
<!-- <h3 class="box-title" style="font-size:13px">Variance Capacity Forecast[t-1] vs. Actual)</h3>-->
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<!-- POP UP MODAL -->
<div ng-controller="MainCtrl" class="container">
<button ng-click="toggleModal('Success')" class="btn btn-default">Add Client</button>
<!-- Any additional data / buttons inside the modal -->
<modal visible="showModal">
<!-- FORM -->
<form ng-submit="submit()" ng-controller = "formCtrl">
<div>
<label for="name">Client ID:</label>
<input type="text" id="client_id" ng-model="formData.id"/>
</div>
<br>
<div>
<label for="name">Client Name:</label>
<input type="text" id="client_name" ng-model="formData.name"/>
</div>
<br>
<div>
<label for="status">Status:</label>
<select ng-model="formData.statuses" ng-options="x for x in statuses">
</div>
<br>
<br>
<div>
<label for="date">Update Time:</label>
<input id="date" ng-value="TimeStamp">
</div>
<br>
<div>
<label for="updt_by">Update By:</label>
<input type="text" id="updt_by" ng-model="formData.updt_by"/>
</div>
<br>
<div>
<label for="updt_id">Update Id:</label>
<input type="text" id="updt_id" ng-model="formData.updt_id"/>
</div>
<br>
<div>
<label for="cluster">Cluster:</label>
<select ng-model="formData.cluster" ng-options="x for x in cluster">
</div>
<br>
<div>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit
</button>
</div>
</form>
</modal>
<!-- TABLE -->
<div ng-controller = "clientCtrl">
<table class="table table-bordered" style="text-align:center">
<thead class="thead-inverse">
<tr>
<th style="text-align:center">Client_ID</th>
<th style="text-align:center">Client_Name</th>
<th style="text-align:center">Status</th>
<th style="text-align:center">Updt_Time</th>
<th style="text-align:center">Updt_By</th>
<th style="text-align:center">Updt_ID</th>
<th style="text-align:center">Cluster</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in client">
<td>{{i.Client_ID}}</td>
<td>{{i.Client_Name}}</td>
<td>{{i.Status}}</td>
<td>{{i.Updt_Time}}</td>
<td>{{i.Updt_By}}</td>
<td>{{i.Updt_ID}}</td>
<td>{{i.Cluster}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- /.col (LEFT) -->
</div>
</section>
，控制器代码如下所示
clientApp.controller('clientCtrl', ['$scope', '$http','$document', function($scope, $http,$document) {
alert("Inside client control");
var refresh=function(){
$http.get('/client').success(function(response) {
$scope.client = response;
});
};
refresh();
}]);
clientApp.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.buttonClicked = "";
$scope.toggleModal = function(btnClicked){
$scope.buttonClicked = btnClicked;
$scope.showModal = !$scope.showModal;
};
});
clientApp.controller('formCtrl',function($scope,$http){
$scope.statuses = ["Active", "Inactive"];
$scope.cluster = ["East Coast","West Coast","PayPal"]
//Date time field values
var currentTime = new Date()
var yr=currentTime.getFullYear()
var mnth=currentTime.getMonth()
var dt=currentTime.getDate()
if (mnth < 10) {
mnth = "0" + mnth
}
if (dt < 10) {
dt = "0" + dt
}
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
if (minutes < 10) {
minutes = "0" + minutes
}
if (seconds < 10) {
seconds = "0" + seconds
}
$scope.TimeStamp = yr + "-" +mnth+ "-" + dt + " " + hours + ":" + minutes + ":" + seconds + " ";
//when submit button is clicked
$scope.submit = function() {
alert($scope.formData.name);
/* $http.post('/api/stickies', $scope.formData)
**** somehow assign data to something useable by the function below???******
})
.error(function(data){
console.log('Error: ' + data);
});*/
};
});
clientApp.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria- hidden="true">×</button>' +
'<h4 class="modal-title">{{ buttonClicked }} clicked!!</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
现在控制器“clientCtrl”中的警告框未被调用..代码似乎跳过调用'clientCtrl'的整个div
答案 0 :(得分：1)
我可以想象唯一的情况，其他一切正常但你的客户端控制器没有被检测到并且没有错误是你编写clientCtrl的js文件没有添加或加载到你拥有的页面上
<div ng-controller = "clientCtrl">
作为测试在html页面上添加：
<script>
app.controller('clientCtrl', ['$scope', '$http','$document', function($scope, $http,$document) {
alert("Inside client control");
var refresh=function(){
$http.get('/client').success(function(response) {
$scope.client = response;
});
};
refresh();
}]);
</script>
如果此后一切正常。
通过执行
将js文件添加到索引页面<script src="yourClientControllerFile.js"></script>
答案 1 :(得分：1)
您是否在索引标题中提供了clientCtrl文件的路径。 像
<script src="ClientCtrl"></script>