AngularJS

Question

में एकाधिक स्वतंत्र आंशिक I Angular.js ट्यूटोरियल पर काम कर रहा हूं जिसे मैं अब विस्तारित करना चाहता हूं। यह एक साधारण सीआरयूडी ऐप है जिसमें टेम्पलेट्स की एक सूची है: list.html (केवल एक शीर्षक और सामग्री के साथ डीबी में रिकॉर्ड), एक फॉर्म फॉर्म: new.html, और एक संपादन फ़ॉर्म: edit.html।

अभी अभी list.html मेरे आरईएसटी ऐप से टेम्पलेट्स की एक सरणी लोड करता है और उन्हें एक टेबल में प्रदर्शित करता है। एक खोज फ़ॉर्म और कुछ सॉर्टिंग कार्यक्षमता है।

New.html के पास नए टेम्पलेट्स बनाने के लिए एक फॉर्म है।

ये दो .html फ़ाइलों को विभिन्न मार्गों पर जाकर लोड किया जाता है। #/ और #/new

क्या मैं अब क्या करना चाहते हैं एक फ़ाइल index.html जो एक और div अंदर new.html एक div के अंदर दोनों list.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> 

लेकिन मैं इन partials की कार्यक्षमता खो दिया है। यानी खोज फ़ॉर्म ने काम करना बंद कर दिया और नया टेम्पलेट फॉर्म काम करना बंद कर दिया।

Answer 1

मुझे लगता है कि आप क्या कह रहे हैं कि आप <div ng-view></div> को अंतिम ब्लॉक के साथ 2 ng-include के साथ बदल रहे हैं।

यदि ऐसा है तो आप शायद controller मार्ग config में परिभाषित किया गया और html