角JS $范围查询

我试图做到以下几点：

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

搜索啄是一个页标头的一部分，因此，我的索引页如下：

的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"); 
}

应用.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时才起作用？

b。如果正在创建新的子范围，那么$ scope.searchTerm如何在视图模板中可用，即{{searchTerm}}？是否因为ng-model =“searchTerm”在rootScope中创建了一个模型绑定？

c。我还看到，如果我使用$ rootScope.foundItems，但模板中的{{foundItems}}工作正常，但如果我想避免$ rootScope，则使用$ scope。$ parent valid？

在此先感谢。

来源

2014-05-09 trishulpani

a。为什么$ 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 valid？ 你可能应该有一个页面的主控制器，然后从那里调用所有的东西。

来源

2014-05-09 12:57:02

角JS $范围查询

回答

相关问题