[英]Angular JS $scope query
I'm trying to do the following: 我正在尝试执行以下操作:
Type something in a search box, perform the related search and show the result defined in a separate view template. 在搜索框中键入内容,执行相关搜索,并在单独的视图模板中显示定义的结果。
The search thingy is part of a page header and so, my index page is as follows: 搜索内容是页面标题的一部分,因此,我的索引页面如下:
index.html 的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 (relevant function) 控制器(相关功能)
$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 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: '/'});
}]);
Search result template: 搜索结果模板:
Found {{ foundItems }} product(s) for search phrase <i>"{{searchTerm}}"</i>
It all works fine, but in getting to this stage, I am confused by the following: 一切正常,但是在进入此阶段时,我对以下内容感到困惑:
a. 一种。 Why is
$scope.foundItems not visible in the template ie, {{foundItems}} works only when I use
$scope.$parent.foundItems in the controller?
为什么$ scope.foundItems在模板中不可见,即{{foundItems}}仅在我在控制器中使用
$ scope。$ parent.foundItems时有效?
b. 湾 If a new child scope is being created, how come
$scope.searchTerm is available in the view template ie, {{searchTerm}}?
如果要创建新的子作用域,则如何在视图模板(即{{searchTerm}})中使用$ scope.searchTerm ? Is it because ng-model="searchTerm" creates a model binding in the rootScope?
是否因为ng-model =“ searchTerm”在rootScope中创建了模型绑定?
c. C。 I also saw that {{foundItems}} in the template worked fine if I used
$rootScope.foundItems , but what if I want to avoid $rootScope - is the use of $scope.$parent valid?
我还看到,如果我使用$ rootScope.foundItems ,则模板中的{{foundItems}}可以正常工作,但是如果我想避免$ rootScope怎么办-$ scope。$ parent的使用有效吗?
Thanks in advance. 提前致谢。
a. 一种。 Why is $scope.foundItems not visible in the template ie, {{foundItems}} works only when I use $scope.$parent.foundItems in the controller?
为什么$ scope.foundItems在模板中不可见,即{{foundItems}}仅在我在控制器中使用$ scope。$ parent.foundItems时有效? I think it's a little strange to assign the same controller in the ng-view and then another tag like button.
我认为在ng-view中分配相同的控制器,然后再分配另一个类似button的标签有点奇怪。 Because button will create its own scope right there.
因为button将在此处创建自己的范围。 And then ng-view also creates one.
然后ng-view也创建一个。
b. 湾 If a new child scope is being created, how come $scope.searchTerm is available in the view template ie, {{searchTerm}}?
如果要创建新的子作用域,则如何在视图模板(即{{searchTerm}})中使用$ scope.searchTerm? Is it because ng-model="searchTerm" creates a model binding in the rootScope?
是否因为ng-model =“ searchTerm”在rootScope中创建了模型绑定? that scope has nothing to do with the doSearch scope actually.
该范围实际上与doSearch范围无关。
c. C。 I also saw that {{foundItems}} in the template worked fine if I used $rootScope.foundItems, but what if I want to avoid $rootScope - is the use of $scope.$parent valid?
我还看到如果使用$ rootScope.foundItems,模板中的{{foundItems}}可以正常工作,但是如果我想避免$ rootScope怎么办-$ scope。$ parent的使用有效吗? You should probably have a main controller for the page and then call everything from there perhaps.
您可能应该为页面设置一个主控制器,然后从那里调用所有内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.