javascript - AngularJS 中的多个独立部分

Question

我一直在研究 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>
    &nbsp;|&nbsp;
    <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>

我尝试使用:

<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>

但是我失去了这些部分的功能。即搜索表单停止工作，新模板表单停止工作。

Answer 1

我想你的意思是你正在替换 <div ng-view></div>最后一个 block 有 2 ng-include .

如果是这样，您可能不需要 controller在路由配置中定义，需要添加 ng-controller html 的属性