Question

我试图执行以下操作：

在搜索框中输入内容，执行相关搜索并显示在单独的视图模板中定义的结果。

搜索thingy是页眉的一部分，因此，我的索引页面如下：

的index.html

<div class="row search-box">

    <div class="col-md-2"></div>
    <div class="col-md-6">

        <form id="myForm" class="form-inline form-search"
            style="padding-left: 10px">
<!-- Search box -->
            <input id="in" type="text" ng-model="searchTerm" placeholder="Search for products, categories or brands"
                class="search-query input-search">

            <button class="btn searchBtn" ng-click="doSearch()" ng-controller="MediaListController">
                <i class="icon-search"></i>Search
            </button>

        </form>
    </div>
    <div class="col-md-3">

     <div class="btn btn-blue cart-btn-cont">
        <span class="cart-icon"></span>
     </div>
    </div>
</div>

...

<div ng-view></div>

控制器（相关功能）

$scope.doSearch = function () {

    var type = $scope.mediaType;
    $scope.foundItems = MediaService.search().length;
    console.log("Found items :"+ $scope.foundItems + "for search term :"+ $scope.searchTerm);
    $location.path("/search");
}

app.js

var app= angular.module('sampleApp', ['ngRoute','ngResource','mgcrea.ngStrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {templateUrl: 'app/views/partials/login.html',     controller: 'LoginController'});   
$routeProvider.when('/search', {templateUrl :  'app/views/partials/tpl/search_result.tpl.html'});
$routeProvider.when('/', {templateUrl: 'app/views/landing_page.html',   controller: 'MediaListController'});    
$routeProvider.otherwise({redirectTo: '/'});
}]);

搜索结果模板：

Found {{ foundItems }} product(s) for search phrase <i>"{{searchTerm}}"</i>

一切正常，但在进入这个阶段时，我对以下内容感到困惑：

一个。为什么 $ scope.foundItems 在模板中不可见，即{{foundItems}}仅在我在控制器中使用 $ scope。$ parent.foundItems 时才有效？

湾如果正在创建新的子范围，那么 $ scope.searchTerm 如何在视图模板中可用，即{{searchTerm}}？是因为ng-model =＆＃34; searchTerm＆＃34;在rootScope中创建模型绑定？

C。我还看到，如果我使用 $ rootScope.foundItems ，模板中的{{foundItems}}工作正常，但如果我想避免使用$ rootScope，那么使用$ scope。$ parent有效吗？

提前致谢。

Answer 1

一个。为什么$ scope.foundItems在模板中不可见，即{{foundItems}}只有在控制器中使用$ scope。$ parent.foundItems时才有效？ 我认为在ng-view中分配相同的控制器然后在按钮上分配另一个标签有点奇怪。因为按钮会在那里创建自己的范围。然后ng-view也会创建一个。

湾如果正在创建一个新的子范围，那么视图模板中有哪些$ scope.searchTerm可用，即{{searchTerm}}？是因为ng-model =＆＃34; searchTerm＆＃34;在rootScope中创建模型绑定？ 该范围实际上与doSearch范围无关。

℃。我还看到模板中的{{foundItems}}工作正常，如果我使用$ rootScope.foundItems，但如果我想避免使用$ rootScope，那么使用$ scope。$ parent有效吗？ 您可能应该为该页面设置一个主控制器，然后从那里调用所有内容。

Angular JS $范围查询

1 个答案: