Javascript AngularJS中的多个独立部分
我一直在编写Angular.js教程,现在我想对其进行扩展。这是一个简单的CRUD应用程序,它有一个模板列表:list.html(只在数据库中记录标题和内容)、create form:new.html和edit form:edit.html 刚才list.html从我的REST应用程序加载了一组模板,并将它们显示在一个表中。有一个搜索表单和一些排序功能 New.html有一个用于创建新模板的表单 这两个.html文件通过不同的路径加载<代码>#/和Javascript AngularJS中的多个独立部分,javascript,model-view-controller,angularjs,Javascript,Model View Controller,Angularjs,我一直在编写Angular.js教程,现在我想对其进行扩展。这是一个简单的CRUD应用程序,它有一个模板列表:list.html(只在数据库中记录标题和内容)、create form:new.html和edit form:edit.html 刚才list.html从我的REST应用程序加载了一组模板,并将它们显示在一个表中。有一个搜索表单和一些排序功能 New.html有一个用于创建新模板的表单 这两个.html文件通过不同的路径加载#/和#/new 我现在想做的是有一个文件index.html
#/new
我现在想做的是有一个文件index.html,它在一个div中加载list.html,然后在另一个div中加载new.html。其思想是记录列表将始终显示在左侧,然后其他部分将加载到右侧区域。因此,单击列表中的模板将在列表旁边的区域打开它,但列表保持不变。然后,如果单击“新建模板”按钮,新模板表单将重新显示在内容区域中,但列表将保持不变
这是我的密码:
app.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();
};
List.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>
重置
排序:
New.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>
邮筒
{{Html::style('css/bootstrap.cerulean.min.css')}
@收益率('css')
{{Html::style('css/style.css')}
@包括('common.header fluid')
@包括('common.footer')
{{HTML::script('js/jquery.min.js')}
{{HTML::script('js/bootstrap.min.js')}
{{HTML::script('js/angular.min.js')}
{{HTML::script('js/angular.min.js')}
{{HTML::script('js/jquery.dataTables.min.js')}
@产量('脚本')
{{HTML::script('js/app.js')}
{{HTML::script('js/main.js')}
我尝试使用:
<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>
但是我失去了这些部分的功能。ie搜索表单停止工作,新模板表单停止工作。我想你说的是你正在用2
ng include
替换最后一个块
如果是这样,您可能不需要路由配置中定义的
控制器
,需要将ng controller
属性添加到html中没有保留相同的ng视图。通过在路由中指定模板,我将index.html加载到ng视图中。然后我尝试使用ng include加载到两个单独的模板文件中。我想知道。如何让这两个模板独立工作。2.如何避免弄乱我现有的代码您是否尝试在每个ng include
中设置ng controller
,而不是在route config中?我将控制器添加到ng include中,一些功能又回来了。现在的问题是,在执行GET或POST操作时,所有my参数都以未定义的方式发送