20

注文を表示できる ng-view (管理パネル) をセットアップしています。json リクエストを変更するために使用したい ng-view の外に検索ボックスがあります。タイトルなどへのアクセスに関するいくつかの投稿を見たことがありますが、それらを機能させることができませんでした-おそらく時代遅れです。

主なアプリのもの:

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

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 に答える