AngularJS - 访问元素NG-视图外 [英] AngularJS - access elements outside of ng-view
问题描述
我有与NG-视图（管理面板），让我显示订单设置。我有NG-视图外一个搜索框，我想用修改我的JSON请求。我已经看到了访问的东西，如标题一些职位，但无法让他们的工作 - 也许是过时
主要应用的东西：
angular.module（'对myApp'，['myApp.controllers'，'myApp.filters'，'myApp.services'，'myApp.directives'，'ui.bootstrap ]）。
配置（['$ routeProvider'，'$ locationProvider'，函数（$ routeProvider，$ locationProvider）{$ routeProvider。
什么时候（'/'， {
templateUrl：/partials/order/manage.html'，
控制器：'ManageOrderCtrl
}）。
当（'/顺序/：身份证'，{
templateUrl：/partials/order/view.html'，
控制器：'ViewOrderCtrl
}）。
除此以外（{
redirectTo：'/'
}）;
$ locationProvider.html5Mode（真）;
}]）;
管理控制器：
angular.module（'myApp.controllers'，[]）
.controller（'ManageOrderCtrl'，['$范围，$ HTTP，$对话'，'配置'，'页'，函数（$范围，$ HTTP，$对话框，配置，页）{ //希望有来自可在这里输入＃搜寻搜索值
VAR的getData =功能（）{
$ http.get（'/命令）。
成功（功能（数据，状态，头，配置）{
$ scope.orders = data.orders;
}）;
};的getData（）;
}）
查看：
＆LT;机身NG-应用=对myApp＆GT;
＆LT;输入类型=文本ID =搜索＆GT;
＆LT; DIV CLASS =NG-斗篷＆GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
如果你要去外面＆LT访问的东西; DIV NG-视图＆gt;＆LT; / DIV＆GT; ，我认为更好的方法是创造外部区域控制器以及。然后，创建共享控制器之间的数据服务：
＆LT;机身NG-应用=对myApp＆GT;
＆LT; DIV NG控制器=MainCtrl＆GT;
＆LT;输入类型=文本ID =搜索＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =NG-斗篷＆GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
（ NG-控制器=MainCtrl，也可以放置在＆LT;身体GT; 标记 - 那么在NG-视图$范围将是MainCtrl $范围，而不是一个兄弟姐妹的孩子。）
创建服务很简单，只要这样的：
app.factory（'搜索'，函数（）{
返回的{text：''};
}）;
和它的注射是这样的：
app.controller（'ManageOrderCtrl'，函数（$范围，搜索）{
$ scope.searchFromService =搜索;
}）;app.controller（'MainCtrl'，函数（$范围，搜索）{
$ scope.search =搜索;
}）;
这样，您就不必依赖于通过全球$ rootScope共享数据（这有点像依靠全局变量在JavaScript中 - 为各种原因一个坏主意）或通过$父范围可以是也可能不是present。
我创建了一个 plnkr ，试图展现中的两个解决方案之间的差异。
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.
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>
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.)
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.
I've created a plnkr that tries to show the difference between the two solutions.
这篇关于AngularJS - 访问元素NG-视图外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
