我有一个 ng-view(管理面板)的设置，可以让我显示订单。我在 ng-view 之外有一个搜索框，我想用它来修改我的 json 请求。我看过一些关于访问标题等内容的帖子，但无法让它们工作 - 也许已经过时了。
主要应用内容:
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);
}]);
管理 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();
})
查看:
<body ng-app="myApp" >
<input type="text" id="search">
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
最佳答案
如果您要访问 <div ng-view></div> 之外的内容，我认为更好的方法是为外部区域创建一个 Controller 。然后您创建一个服务来在 Controller 之间共享数据:
<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" 也可以放在 <body> 标签上 - 那么 ng-view $scope 将是 MainCtrl $scope 的子级而不是同级。)
创建服务就像这样简单:
app.factory('Search',function(){
return {text:''};
});
它可以这样注入(inject):
app.controller('ManageOrderCtrl', function($scope,Search) {
$scope.searchFromService = Search;
});
app.controller('MainCtrl',function($scope,Search){
$scope.search = Search;
});
这样你就不必依赖通过全局 $rootScope 共享数据(这有点像依赖 javascript 中的全局变量 - 出于各种原因，这是一个坏主意)或通过 $parent 作用域，这可能或可能不存在。
我创建了一个 plnkr that tries to show the difference介于两种解决方案之间。
关于javascript - AngularJS - 访问 ng-view 之外的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16028678/