在两个路线之间保存一些搜索信息

时间:2013-07-12 10:17:15

标签: angularjs

我有路由

app.config(function ($routeProvider) {
$routeProvider.
    when("/questions", {controller:"Questions", templateUrl: "questions.html"}).
    when("/objections", {controller: "Objections", templateUrl: "objections.html"}).
    when("/objections/:oId", {controller: "Objections", templateUrl: "objections.html"}).
    when("/persons", {controller: "Persons", templateUrl: "persons.html"}).
    when("/persons/:pId", {controller: "Persons", templateUrl: "persons.html"}).
    when("/questions/:qId", {controller: "Questions", templateUrl: "questions.html"}).
    otherwise({redirectTo : "/persons"});
})

和/ objectionsand / objections /的一个模板:pId

<script type="text/ng-template" id="objections.html">
<div class="stroke">
<label>Поиск: <input class="border" type="text" ng-model="search.text"></label>
<ul class="objections-objections left_column">
    <li class="border" ng-repeat="objection in objections | filter:search">
        <a href="#/objections/{{objection.id}}">
            {{objection.text}}
        </a>
    </li>
</ul>
<div class="right_column">
    <p class="header"></p>
    <p class="text">
        <span>ID возражения: {{objection.id}}</span>
        <br>
        <textarea class="border" name="" id="" cols="30" rows="10" ng-model="objection.text"></textarea>
    </p>
    <ul class="questions-objections" ng-show="objection.questions.length">
        <span>Список вопросов</span>
        <li class="border" ng-repeat="question in objection.questions">
            <a href="#/questions/{{question.id}}">{{question.text}}</a>
        </li>
    </ul>
    <p class="footer">
        <button ng-click="add()">Добавить</button>
        <a href="" ng-click="delete(objection)">Удалить</a>
        <a href="" class="save" ng-click="save()">Сохранить</a>
        <a href="" class="close" ng-click="cancel()">Закрыть</a>
    </p>
</div>

所以当我在搜索字段中输入文本并对列表项进行排序时,我点击其中一个项目并查看看似扁平的seearch字段

我应该如何重新编写我的代码,以免在此路由之间重置search.text指令?

谢谢

1 个答案:

答案 0 :(得分:1)

当角度视图发生变化时,有多种方法可以保持对象。

  • 您可以在$ rootScope上定义搜索条件(可以注入任何控制器),例如$ rootScope.searchCriteria = {term:null};然后在您的模板中绑定到此属性。您可以直接使用ng-model="searchCriteria.term"
  • 您可以在ng-view的父控制器上定义属性(如果有)。如
<div ng-controller="rootController">
   <ng-view/>
</div>
  • 您可以在模块配置期间创建服务或定义value。由于这些是单身性质,无论您何时注入此服务,您都将获得搜索条件对象。

myapp.value("searchCriteria",{term:null});

appRoot.controller("Questions",
        ["$scope", "searchCriteria",
            function ($scope, searchCriteria ) {

请参阅模块文档here