我是Angular的全新人物。 我想使用ng-Route和ng-view加载两个不同的部分视图和单一控制器。但每次我在SpecialFields.cshtml下执行时,我都得到了这种类型的error。
我已多次搜索并在堆栈溢出中测试了很多点,如下所示: angular multiple routes sharing one controller。 但代码无法正常运行。
如何解决此问题?如何通过ng-view和ng-route渲染部分视图? 提前致谢
SpecialField.cshtml是:
raw_input()
这是specialFieldController.js
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/App/Patients/SpecialFields/specialFieldController.js"></script>
<script src="~/App/Common/Services/StorageService.js"></script>
<div class="row" style="font-family:BYekan">
<div class="col-md-12">
<div class="portlet light portlet-fit bordered">
<div class="portlet-title">
<div class="caption">
<i class=" fa fa-cog font-green"></i>
<span class="caption-subject font-green bold uppercase">SpecialFields config</span>
</div>
</div>
<div class="portlet-body" ng-app="SpecialFields" ng-controller="SpecialFieldsController">
<div class="row" style="margin:0 1px;direction:rtl">
<div class="col-md-12">
<div class="row panel panel-default">
<div class="panel-body">
<form name="frm" class="form-inline" >
<div class="form-group col-md-6">
<label for="fieldname" class="bold control-label">Field Name</label>
<span class="required">*</span>
<input type="text" name="fieldname" id="fieldname" class="form-control" required ng-model="specialfieldname" />
</div>
<div class="form-group col-md-5 col-md-pull-1" >
<label for="fieldtype" class="bold control-label">Field Type:</label>
<span class="required"> * </span>
<select id="fieldtype" class="form-control" ng-model="specialfieldtype" ng-options="option for option in [Item1,Item2]">
<option value="" class="placeholder" selected disabled>Item1</option>
</select>
<button class="btn btn-primary " type="submit" ng-click="addSpecialfield()">
Add
<span class="fa fa-plus-square-o" style="padding-right:5px;"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<table class="table table-striped table-bordered" id="sfields">
<thead>
<tr>
<th> Index</th>
<th>Field name</th>
<th>Field Type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="specialfield in specialfields">
<td class="col-sm-2">
{{$index+1}}
</td>
<td class="col-sm-4">
{{ specialfield.specialfieldname }}
</td>
<td class="col-sm-4">
{{ specialfield.specialfieldtype }}
</td>
<td class="col-sm-1">
<a href="#/update" class="btn btn-default">
Edit
<span class="glyphicon glyphicon-check"></span>
</a>
</td>
<td class="col-sm-1">
<a href="#" class="btn btn-danger" ng-click="deleteSpecialfield(specialfield)">
Delete
<span class="fa fa-remove"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
这是StorageService.js
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
// Create the AngularJS app
var app = angular.module('SpecialFields', ['common']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'SpecialFieldsController',
templateUrl: '/List.html'
})
.when('/update', {
controller: 'SpecialFieldsController',
templateUrl: '/Update.html'
})
});
// Create the Controller
app.controller('SpecialFieldsController', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
//Read the Sfield List from LocalStorage
$scope.specialfields = getLocalStorage.getSpecialfields();
//Count the SpecialFields List
$scope.count = $scope.specialfields.length;
//Add Sfield - using AngularJS push to add sfield in the sfield Object
//Call BindTable_SpecialField to update the locally stored Sfield List
//Reset the AngularJS SpecialField scope
//Update the Count
$scope.addSpecialfield = function () {
$scope.specialfields.push({'specialfieldname': $scope.specialfieldname, 'specialfieldtype': $scope.specialfieldtype });
getLocalStorage.BindTable_SpecialField($scope.specialfields);
//$scope.sfno = '';
$scope.specialfieldname = '';
$scope.specialfieldtype = '';
$scope.count = $scope.specialfields.length;
};
//Delete Sfield - Using AngularJS splice to remove the sfield row from the sfield list
//All the Update sfield to update the locally stored sfield List
//Update the Count
$scope.deleteSpecialfield = function (specialfield) {
$scope.specialfields.splice($scope.specialfields.indexOf(specialfield), 1);
getLocalStorage.BindTable_SpecialField($scope.specialfields);
$scope.count = $scope.specialfields.length;
};
}]);
}
**编辑2:具有类portlet-body的div将具有ng-view指令,并且将成为我的视图的占位符。此div中的所有代码都将移动 要呈现的List.html.another html文件是Update.html 单击“编辑”按钮时呈现的内容。