cyb*_*bat 20 javascript angularjs
我有一个带有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);
}]);
管理控制器:
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>
joa*_*mbl 37
如果您要访问外部的东西<div ng-view></div>,我认为更好的方法是为外部区域创建一个控制器.然后创建一个服务以在控制器之间共享数据:
<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-视图$范围将是MainCtrl $范围,而不是一个兄弟姐妹的孩子.)
创建服务就像这样简单:
app.factory('Search',function(){
return {text:''};
});
并且可注射如下:
app.controller('ManageOrderCtrl', function($scope,Search) {
$scope.searchFromService = Search;
});
app.controller('MainCtrl',function($scope,Search){
$scope.search = Search;
});
这样,您就不必依赖于通过全球$ rootScope共享数据(这有点像在JavaScript依靠全局变量 - 用于各种原因一个坏主意)或通过$父范围可能会或可能不会当下.
| 归档时间： |
|
| 查看次数： |
30464 次 |
| 最近记录： |