javascript - Angular JS $scope 查询

Question

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

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

搜索内容是页面标题的一部分，因此，我的索引页面如下:

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>

Controller (相关功能)

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

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

A。为什么 $scope.foundItems 在模板中不可见，即 {{foundItems}} 仅当我在 Controller 中使用 $scope.$parent.foundItems 时才起作用？

b.如果正在创建新的子范围，为什么 $scope.searchTerm 在 View 模板(即 {{searchTerm}})中可用？是因为 ng-model="searchTerm"在 rootScope 中创建了模型绑定(bind)吗？

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

提前致谢。

Answer 1

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

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

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