I have a setup with an ng-view (an admin panel) that lets me display orders. I have a search box outside of ng-view that I would like to use to modify my json request. I've seen some posts on accessing things such as the title but was not able to get them to work - perhaps outdated.
我有一个带有ng-view（管理面板）的设置，可以让我显示订单。我在ng-view之外有一个搜索框，我想用它来修改我的json请求。我已经看到一些关于访问诸如标题之类的帖子，但却无法让它们工作 - 可能已经过时了。
Main app stuff:
主要应用程序：
angular.module('myApp', ['myApp.controllers', 'myApp.filters', 'myApp.services', 'myApp.directives', 'ui.bootstrap']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/order/manage.html',
controller: 'ManageOrderCtrl'
}).
when('/order/:id', {
templateUrl: '/partials/order/view.html',
controller: 'ViewOrderCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
Manage controller:
管理控制器：
angular.module('myApp.controllers', [])
.controller('ManageOrderCtrl', ['$scope', '$http', '$dialog', 'config', 'Page', function($scope, $http, $dialog, config, Page) {
// would like to have search value from input #search available here
var getData = function() {
$http.get('/orders').
success(function(data, status, headers, config) {
$scope.orders = data.orders;
});
};
getData();
})
View:
视图：
<body ng-app="myApp" >
<input type="text" id="search">
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
3 个解决方案
#1
37
If you're going to access stuff outside the <div ng-view></div>, I think a better approach would be to create a controller for the outer region as well. Then you create a service to share data between the controllers:
如果您要访问
<body ng-app="myApp" >
<div ng-controller="MainCtrl">
<input type="text" id="search">
</div>
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
(ng-controller="MainCtrl" can also be placed on the <body> tag - then the ng-view $scope would be a child of the MainCtrl $scope instead of a sibling.)
（ng-controller =“MainCtrl”也可以放在标签上 - 然后ng-view $ scope将是MainCtrl $ scope的子节点而不是兄弟节点。）
Creating the service is as simple as this:
创建服务就像这样简单：
app.factory('Search',function(){
return {text:''};
});
And it's injectable like this:
并且可注射如下：
app.controller('ManageOrderCtrl', function($scope,Search) {
$scope.searchFromService = Search;
});
app.controller('MainCtrl',function($scope,Search){
$scope.search = Search;
});
This way you don't have to rely on sharing data through the global $rootScope (which is kinda like relying on global variables in javascript - a bad idea for all sorts of reasons) or through a $parent scope which may or may not be present.
这样你就不必依赖于通过全局$ rootScope共享数据（这有点像依赖于javascript中的全局变量 - 出于各种原因一个坏主意）或通过$ parent范围，可能是也可能不是当下。
I've created a plnkr that tries to show the difference between the two solutions.
我创建了一个试图显示两种解决方案之间差异的plnkr。
#2
3
You can use scope hierarchies.
您可以使用范围层次结构。
Add an "outer" ng-controller definition to your HTML like this:
在HTML中添加“外部”ng-controller定义，如下所示：
<body ng-controller="MainCtrl">
It will become the $parent scope. But you do not need to share data by using a service. You don't even need to use the $scope.$parent scope. You can use scope hierarchies. (See the Scope Hierarchies section on that page). It is really easy.
它将成为$ parent范围。但您不需要使用服务来共享数据。您甚至不需要使用$ scope。$ parent scope。您可以使用范围层次结构。 （请参阅该页面上的“范围层次结构”部分）。这真的很容易。
In your MainCtrl, you may have this:
在您的MainCtrl中，您可能有：
$scope.userName = "Aziz";
Then in any controller that is nested within MainCtrl (and does not override the userName in its own scope) will have userName also! You can use in in the view with {{userName}}.
然后在任何嵌套在MainCtrl中的控制器（并且不覆盖其自己范围内的userName）也将具有userName！您可以在{{userName}}的视图中使用。
#3
0
Try this...
尝试这个...
View:
视图：
<body ng-app="myApp" >
<input type="text" id="search" ng-model="searchQuery" />
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
Using it in your controller:
在控制器中使用它：
$http.get('/orders?query=' + $scope.searchQuery).
success(function(data, status, headers, config) {
$scope.orders = data.orders;
});
Basically, you can do that with anything INSIDE ng-app... Move your ng-app to the html tag and you can edit the title as well!
基本上，你可以用INSIDE-app中的任何东西做到这一点...将你的ng-app移动到html标签，你也可以编辑标题！
#1
37
If you're going to access stuff outside the <div ng-view></div>, I think a better approach would be to create a controller for the outer region as well. Then you create a service to share data between the controllers:
如果您要访问
<body ng-app="myApp" >
<div ng-controller="MainCtrl">
<input type="text" id="search">
</div>
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
(ng-controller="MainCtrl" can also be placed on the <body> tag - then the ng-view $scope would be a child of the MainCtrl $scope instead of a sibling.)
（ng-controller =“MainCtrl”也可以放在标签上 - 然后ng-view $ scope将是MainCtrl $ scope的子节点而不是兄弟节点。）
Creating the service is as simple as this:
创建服务就像这样简单：
app.factory('Search',function(){
return {text:''};
});
And it's injectable like this:
并且可注射如下：
app.controller('ManageOrderCtrl', function($scope,Search) {
$scope.searchFromService = Search;
});
app.controller('MainCtrl',function($scope,Search){
$scope.search = Search;
});
This way you don't have to rely on sharing data through the global $rootScope (which is kinda like relying on global variables in javascript - a bad idea for all sorts of reasons) or through a $parent scope which may or may not be present.
这样你就不必依赖于通过全局$ rootScope共享数据（这有点像依赖于javascript中的全局变量 - 出于各种原因一个坏主意）或通过$ parent范围，可能是也可能不是当下。
I've created a plnkr that tries to show the difference between the two solutions.
我创建了一个试图显示两种解决方案之间差异的plnkr。
#2
3
You can use scope hierarchies.
您可以使用范围层次结构。
Add an "outer" ng-controller definition to your HTML like this:
在HTML中添加“外部”ng-controller定义，如下所示：
<body ng-controller="MainCtrl">
It will become the $parent scope. But you do not need to share data by using a service. You don't even need to use the $scope.$parent scope. You can use scope hierarchies. (See the Scope Hierarchies section on that page). It is really easy.
它将成为$ parent范围。但您不需要使用服务来共享数据。您甚至不需要使用$ scope。$ parent scope。您可以使用范围层次结构。 （请参阅该页面上的“范围层次结构”部分）。这真的很容易。
In your MainCtrl, you may have this:
在您的MainCtrl中，您可能有：
$scope.userName = "Aziz";
Then in any controller that is nested within MainCtrl (and does not override the userName in its own scope) will have userName also! You can use in in the view with {{userName}}.
然后在任何嵌套在MainCtrl中的控制器（并且不覆盖其自己范围内的userName）也将具有userName！您可以在{{userName}}的视图中使用。
#3
0
Try this...
尝试这个...
View:
视图：
<body ng-app="myApp" >
<input type="text" id="search" ng-model="searchQuery" />
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
Using it in your controller:
在控制器中使用它：
$http.get('/orders?query=' + $scope.searchQuery).
success(function(data, status, headers, config) {
$scope.orders = data.orders;
});
Basically, you can do that with anything INSIDE ng-app... Move your ng-app to the html tag and you can edit the title as well!
基本上，你可以用INSIDE-app中的任何东西做到这一点...将你的ng-app移动到html标签，你也可以编辑标题！