AngularJS - 访问 ng-view 之外的元素 [英] AngularJS - access elements outside of ng-view

查看：17 发布时间：2021/11/9 3:43:33 javascript angularjs

本文介绍了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.什么时候('/'， {templateUrl: '/partials/order/manage.html',控制器:'ManageOrderCtrl'}).当('/订单/:id'，{templateUrl: '/partials/order/view.html',控制器:'ViewOrderCtrl'}).除此以外({重定向到:'/'});$locationProvider.html5Mode(true);}]);

管理控制器:

angular.module('myApp.controllers', []).controller('ManageOrderCtrl', ['$scope', '$http', '$dialog', 'config', 'Page', function($scope, $http, $dialog, config, Page) {//想要从输入#search 中获得搜索值，这里可用var getData = function() {$http.get('/订单').成功(功能(数据，状态，标题，配置){$scope.orders = data.orders;});};获取数据()；})

查看:

<input type="text" id="search"><div class="ng-cloak" ><div ng-view></div>

解决方案

如果你要访问 <div ng-view></div> 之外的东西，我认为更好的方法是为外部区域创建一个控制器.然后创建一个服务来在控制器之间共享数据:

<body ng-app="myApp" ><div ng-controller="MainCtrl"><input type="text" id="search">

<div class="ng-cloak" ><div ng-view></div>

(ng-controller="MainCtrl" 也可以放在标签上 - 那么 ng-view $scope 将是MainCtrl $scope 而不是兄弟.)

创建服务就像这样简单:

app.factory('Search',function(){返回{文本:''}；});

它可以像这样注入:

app.controller('ManageOrderCtrl', function($scope,Search) {$scope.searchFromService = 搜索；});app.controller('MainCtrl',function($scope,Search){$scope.search = 搜索；});

这样你就不必依赖于通过全局 $rootScope 共享数据(这有点像依赖 javascript 中的全局变量 - 出于各种原因这是一个坏主意)或通过 $parent 范围，它可能或可能不存在.

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

I have a setup with an ng-view (an admin panel) that lets me display orders. I have a search box outside of ng-view that I would like to use to modify my json request. I've seen some posts on accessing things such as the title but was not able to get them to work - perhaps outdated.

Main app stuff:

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

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

View:

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

解决方案

If you're going to access stuff outside the <div ng-view></div>, I think a better approach would be to create a controller for the outer region as well. Then you create a service to share data between the controllers:

<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" can also be placed on the <body> tag - then the ng-view $scope would be a child of the MainCtrl $scope instead of a sibling.)

Creating the service is as simple as this:

app.factory('Search',function(){
  return {text:''};
});

And it's injectable like this:

app.controller('ManageOrderCtrl', function($scope,Search) {
  $scope.searchFromService = Search;
});

app.controller('MainCtrl',function($scope,Search){
  $scope.search = Search;
});

This way you don't have to rely on sharing data through the global $rootScope (which is kinda like relying on global variables in javascript - a bad idea for all sorts of reasons) or through a $parent scope which may or may not be present.

I've created a plnkr that tries to show the difference between the two solutions.

这篇关于AngularJS - 访问 ng-view 之外的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

AngularJS - 访问 ng-view 之外的元素 [英] AngularJS - access elements outside of ng-view

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

AngularJS - 访问 ng-view 之外的元素 [英] AngularJS - access elements outside of ng-view

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭