Angular JS $scope 查询答案

【问题标题】：Angular JS $scope queryAngular JS $scope 查询
【发布时间】：2014-05-09 20:57:02
【问题描述】：

我正在尝试执行以下操作：

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

搜索是页眉的一部分，所以我的索引页如下：

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="searchTerm" 在 rootScope 中创建了模型绑定吗？

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

提前致谢。

【问题讨论】：

标签： javascript angularjs angularjs-scope

【解决方案1】：

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

b.如果正在创建一个新的子范围，$scope.searchTerm 是如何在视图模板中可用的，即 {{searchTerm}}？是因为 ng-model="searchTerm" 在 rootScope 中创建了模型绑定吗？ 该范围实际上与 doSearch 范围无关。

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

【讨论】：