Nhiều partials độc lập trong AngularJS

Question

Tôi đã làm việc trên một hướng dẫn Angular.js mà bây giờ tôi muốn mở rộng. Đó là một ứng dụng CRUD đơn giản có danh sách các mẫu: list.html (chỉ các bản ghi trong một db có tiêu đề và nội dung), một biểu mẫu tạo: new.html và một biểu mẫu chỉnh sửa: edit.html.

Vừa bây giờ list.html tải một mảng mẫu từ ứng dụng REST của tôi và hiển thị chúng trong bảng. Có một hình thức tìm kiếm và một số chức năng phân loại.

New.html có biểu mẫu để tạo mẫu mới.

Hai tệp .html này được tải bằng cách chuyển đến các tuyến khác nhau. #/ và #/new

Điều tôi muốn làm bây giờ là có một tệp index.html tải cả list.html bên trong một div và sau đó new.html bên trong một div khác. Ý tưởng là danh sách các bản ghi sẽ luôn được hiển thị ở bên trái và sau đó các partials khác sẽ được tải vào khu vực bên phải. Vì vậy, nhấp vào một mẫu trong danh sách sẽ mở nó trong khu vực bên cạnh danh sách nhưng danh sách vẫn không bị ảnh hưởng. Sau đó, nếu tôi nhấp vào nút mẫu mới, mẫu biểu mẫu mới sẽ xuất hiện lại trong khu vực nội dung nhưng danh sách sẽ vẫn bị ảnh hưởng.

Đây là mã của tôi:

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> 

file layout của tôi:

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

Tôi cố gắng để sử dụng:

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

Nhưng tôi bị mất chức năng của các partials. tức là biểu mẫu tìm kiếm ngừng hoạt động và mẫu biểu mẫu mới ngừng hoạt động.

Answer 1

Tôi nghĩ điều bạn đang nói là bạn đang thay thế <div ng-view></div> bằng khối cuối cùng bằng 2 ng-include.

Nếu vậy bạn có lẽ không cần controller được xác định trong cấu hình định tuyến và cần thêm ng-controller thuộc tính html