Javascript AngularJS-访问ng视图之外的元素_Javascript_Angularjs

Javascript AngularJS-访问ng视图之外的元素

javascript angularjs

Javascript AngularJS-访问ng视图之外的元素,javascript,angularjs,Javascript,Angularjs,我有一个带有ng视图（管理面板）的设置，可以显示订单。我在ng视图外有一个搜索框，我想用它来修改我的json请求。我看过一些关于访问诸如标题之类的内容的帖子，但没能让它们发挥作用——也许已经过时了主要应用程序内容： angular.module('myApp', ['myApp.controllers', 'myApp.filters', 'myApp.services', 'myApp.directives', 'ui.bootstrap']). config(['$routeProvide

我有一个带有ng视图（管理面板）的设置，可以显示订单。我在ng视图外有一个搜索框，我想用它来修改我的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();
})

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

视图：

试试这个

视图：

基本上，你可以用ng应用程序中的任何东西做到这一点。。。将您的ng应用程序移动到

html

标记，您也可以编辑

标题

如果要访问

之外的内容，我认为更好的方法是为外部区域创建一个控制器。然后创建一个服务以在控制器之间共享数据：

（

ng controller=“MainCtrl”

也可以放在

标记上-那么ng view$范围将是MainCtrl$范围的子项，而不是同级项。）

创建服务非常简单，如下所示：

app.factory（'Search'，function（）{
返回{文本：'}；
});

它是可注射的，就像这样：

<body ng-controller="MainCtrl">

app.controller（'ManageOrderCtrl'，函数（$scope，Search）{
$scope.searchFromService=搜索；
});
app.controller（'MainCtrl'，函数（$scope，Search）{
$scope.search=搜索；
});

通过这种方式，您不必依赖于通过全局$rootScope（这有点像依赖javascript中的全局变量——出于各种原因，这是个坏主意）或通过可能存在或不存在的$parent作用域共享数据

我在两个解决方案之间创建了一个范围层次结构。

您可以使用范围层次结构

向HTML中添加“外部”ng控制器定义，如下所示：

<body ng-controller="MainCtrl">

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

差不多了-我遇到的问题是，如果我在搜索框中键入并按enter键，它只会重新加载应用程序，而不会将搜索数据获取到ajax获取。我在表单上有ng submit，它调用MainCtrl内部的函数-不确定如何获取该函数以触发ManageOrderCtrl中的重新加载。这听起来像是一个不同于一个在原始问题中描述，但如果您可以在plnkr中重新创建问题，我可以给它一个真正的goSame问题-如何将搜索表单数据获取到代码中指示的控制器。但我已经解决了-最初，假设我们在ng视图中有一个登录控制器和登录视图，它位于主控制器中，我应该如何根据登录视图中的数据更新主控制器？我们还需要重新启动主控制器。主控制器作用域在嵌套作用域中可用。在代码中放置一个断点并查看$scope。如果视图绑定到控制器，则这不起作用。seachQuery将不会附加到该控制器的作用域。

<body ng-controller="MainCtrl">

$scope.userName = "Aziz";