AngularJS - элементы доступа вне ng-view

У меня есть настройка с 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>

Ответ 1

Если вы хотите получить доступ к материалам вне <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 $будет дочерним элементом области 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 - плохая идея по разным причинам) или через $parent scope, которая может или может не присутствовать.

Я создал plnkr, который пытается показать разницу между двумя решениями.

Ответ 2

Вы можете использовать иерархии областей.

Добавьте определение "внешнего" ng-controller в ваш HTML следующим образом:

<body ng-controller="MainCtrl">

Он станет $parent scope. Но вам не нужно обмениваться данными с помощью службы. Вам даже не нужно использовать область $scope.$parent. Вы можете использовать иерархии областей видимости. (См. Раздел "Иерархии областей" на этой странице). Это действительно легко.

В вашем MainCtrl у вас может быть следующее:

$scope.userName = "Aziz";

Затем в любом контроллере, который вложен в MainCtrl (и не переопределяет имя пользователя в своей собственной области), также будет иметь имя пользователя! Вы можете использовать его в представлении с {{userName}}.

Ответ 3

Попробуйте это...

Вид:

<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;
});

В принципе, вы можете сделать это с помощью любого INSIDE ng-app... Переместите свое ng-приложение в тег html, и вы также можете отредактировать title!