AngularJS-ng-view之外的访问元素

小编典典

AngularJS-ng-view之外的访问元素

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>

阅读 222

2020-07-04

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

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

2020-07-04