AngularJSの複数の独立した部分的な部分

Question

私は今拡張しようとしているAngular.jsのチュートリアルに取り組んできました。これは、テンプレートのリストを持っているシンプルなCRUDアプリケーションです：list.html（タイトルと内容を持つdb内のレコードのみ）、create form：new.html、edit form：edit.html

ちょうどlist.htmlは、RESTアプリケーションからテンプレートの配列を読み込んでテーブルに表示します。検索フォームといくつかのソート機能があります。

New.htmlには、新しいテンプレートを作成するためのフォームがあります。

これらの2つの.htmlファイルは、異なるルートに移動することによって読み込まれます。私は今、何をしたいか​​と#/new

は別のdivの内側にnew.htmlその後、1つのdiv内の両方するlist.htmlをロードし、一つのファイルのindex.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> 
    &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>の最後のブロックを2 ng-includeに置き換えていると思います。

ので、あなたはおそらくルーティングの設定で定義されたcontrollerを必要とhtml