20

我有一个带有 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>
4

3 回答 3

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-view $scope 将是 MainCtrl $scope 的子级而不是兄弟级。）

创建服务就这么简单：

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 中的全局变量 - 出于各种原因的一个坏主意）或通过可能是也可能不是的 $parent 范围当下。

我创建了一个plnkr试图显示两种解决方案之间的区别。

于 2013-04-16T07:10:28.803 回答
3

您可以使用范围层次结构。

像这样向您的 HTML添加一个“外部”ng-controller定义：

<body ng-controller="MainCtrl">

它将成为 $parent 范围。但是您不需要通过使用服务来共享数据。您甚至不需要使用$scope.$parent范围。您可以使用范围层次结构。（请参阅该页面上的范围层次结构部分）。这真的很容易。

在你的MainCtrl，你可能有这个：

$scope.userName = "Aziz";

然后在任何嵌套在 MainCtrl 中的控制器中（并且不会在其自己的范围内覆盖 userName）也将具有 userName ！您可以在视图中使用 {{userName}}。

于 2013-09-25T15:24:34.407 回答
0

尝试这个...

看法：

<body ng-app="myApp" >
  <input type="text" id="search" ng-model="searchQuery" />
  <div class="ng-cloak" >
    <div ng-view></div>
  </div>
</body>

在您的控制器中使用它：

$http.get('/orders?query=' + $scope.searchQuery).
    success(function(data, status, headers, config) {
      $scope.orders = data.orders;
});

基本上，你可以用 ng-app 内的任何东西来做到这一点......将你的 ng-app 移动到html标签，你也可以编辑它title！

于 2013-04-16T06:33:03.047 回答