我一直在编写我现在想要扩展的 Angular.js 教程。这是一个简单的 CRUD 应用程序，它有一个模板列表：list.html（只是在一个带有标题和内容的数据库中记录）、一个创建表单：new.html 和一个编辑表单：edit.html。
刚才 list.html 从我的 REST 应用程序加载了一组模板并将它们显示在表格中。有一个搜索表单和一些排序功能。
New.html 有一个用于创建新模板的表单。
这两个 .html 文件是通过不同的路径加载的。#/和#/new
我现在要做的是有一个文件index.html将 list.html 加载到一个 div 中，然后将 new.html 加载到另一个 div 中。这个想法是记录列表将始终显示在左侧，然后其他部分将加载到右侧的区域中。因此，单击列表中的模板将在列表旁边的区域中打开它，但列表保持不变。然后，如果我单击新模板按钮，新模板表单将重新出现在内容区域中，但列表将保持不变。
这是我的代码：
应用程序.js
var MailStash = angular.module("MailStash", ["ngResource"]).
config(function($routeProvider){
$routeProvider.
when('/', {controller: ListCtrl, templateUrl: '/js/partials/list.html'}).
when('/new', {controller: CreateCtrl, templateUrl: '/js/partials/new.html'}).
when('/edit/:editId', {controller: EditCtrl, templateUrl: '/js/partials/edit.html'})
});
MailStash.factory('Template', function($resource){
return $resource('/api/v1/template/:id', {id: '@id'}, { update: { method: 'PUT' } });
});
var EditCtrl = function($scope, $location, $routeParams, Template) {
$scope.action = "Update";
var id = $routeParams.editId;
$scope.template = Template.get({id: id});
$scope.save = function () {
Template.update({id: id}, $scope.template, function () {
$location.path('/');
});
};
}
var CreateCtrl = function($scope, $location, Template) {
$scope.save = function() {
Template.save($scope.template, function(){
$location.path('/');
});
}
}
var ListCtrl = function($scope, $location, Template) {
$scope.search = function() {
Template.query({
q: $scope.query,
sort_order: $scope.sort_order,
is_desc: $scope.is_desc,
offset: $scope.offset,
limit: $scope.limit
},
function(data){
$scope.more = data.length === 20;
$scope.templates = $scope.templates.concat(data);
});
}
$scope.sort = function(col) {
if($scope.sort_order === col) {
$scope.is_desc = !$scope.is_desc;
} else {
$scope.sort_order = col;
$scope.is_desc = false;
}
$scope.reset();
};
$scope.showMore = function(){
$scope.offset += $scope.limit;
$scope.search();
};
$scope.hasMore = function(){
return $scope.more;
}
$scope.reset = function() {
$scope.limit = 10;
$scope.offset = 0;
$scope.templates = [];
$scope.more = true;
$scope.search();
}
$scope.delete = function() {
var id = this.template.id;
Template.delete({id: id}, function(){
$('#template_'+id).fadeOut();
});
}
$scope.sort_order = "title";
$scope.is_desc = false;
$scope.reset();
};
列表.html：
<form class="form-search">
<div class="input-append">
<input type="text" ng-model="query" class="input-medium search-query" placeholder="Search">
<button ng-click="reset()" type="submit" class="btn"><i class="icon-search"></i></button>
</div>
<button ng-click="query=''; reset()" ng-disabled="!query" type="submit" class="btn">Reset</button>
</form>
<p class="sort">
Sort:
<a ng-click="sort('title')">Title</a>
<span ng-show="sort_order=='title' && is_desc==true"><i class="icon icon-arrow-down"> </i></span>
<span ng-show="sort_order=='title' && is_desc==false"><i class="icon icon-arrow-up"> </i></span>
|
<a ng-click="sort('created_at')">Date Created</a>
<span ng-show="sort_order=='created_at' && is_desc==true"><i class="icon icon-arrow-down"> </i></span>
<span ng-show="sort_order=='created_at' && is_desc==false"><i class="icon icon-arrow-up"> </i></span>
</p>
<table class="table">
<tbody>
<tr ng-repeat="template in templates" id="template_{{template.id}}">
<td>{{template.title}}</td>
</tr>
</tbody>
</table>
<a ng-show="hasMore()" ng-click="showMore()">Show more</a>
<hr>
<a href="/#/new" class="btn"><i class="icon icon-plus"> </i> New Template</a>
新建.html
<h2>New Template</h2>
<form name="new_template">
<div class="control-group" ng-class="{error: form.title.$invalid}">
<div class="controls">
<input type="text" class="span6" ng-model="template.title" name="title" id="title" value="" placeholder="Template name" />
</div>
</div>
<div class="control-group" ng-class="{errors: form.content.$invalid}">
<div class="controls">
<textarea name="content" ng-model="template.content" id="content" class="template-content span12" rows="15"></textarea>
</div>
</div>
<div class="form-actions">
<button ng-click="save()" class="btn btn-primary save-template">Save Template</button>
</div>
</form>
我的布局文件：
<!DOCTYPE html>
<html ng-app="MailStash" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>MailStash</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Billy Jones - http://theninthnode.com">
{{ Html::style('css/bootstrap.cerulean.min.css') }}
@yield('css')
{{ Html::style('css/style.css') }}
</head>
<body class="preview" data-spy="scroll" data-target=".subnav" data-offset="80">
<div class="container-fluid">
@include('common.header-fluid')
</div>
<div class="container-fluid main">
<div ng-view></div>
@include('common.footer')
</div>
{{ HTML::script('js/jquery.min.js') }}
{{ HTML::script('js/bootstrap.min.js') }}
{{ HTML::script('js/angular.min.js') }}
{{ HTML::script('js/angular-resource.min.js') }}
{{ HTML::script('js/jquery.dataTables.min.js') }}
@yield('scripts')
{{ HTML::script('js/app.js') }}
{{ HTML::script('js/main.js') }}
</body>
</html>
我尝试使用：
<div class="row-fluid">
<div class="span3">
<div ng-include="'/js/partials/list.html'"></div>
</div>
<div class="span9">
<div ng-include="'/js/partials/new.html'"></div>
</div>
</div>
但是我失去了这些部分的功能。即搜索表单停止工作，新模板表单停止工作。