AngularJS - ng-view以外の要素へのアクセス

注文を表示するためのng-view（管理パネル）があります。 jsonのリクエストを変更するために使用したいng-view以外の検索ボックスがあります。私はタイトルのようなものにアクセスするためのいくつかの記事を見たことがありますが、それらを動作させることができませんでした - おそらく時代遅れです。AngularJS - 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>

出典

2013-04-16 cyberwombat

$ rootScopeを試しました –

<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-ビュー$の範囲ではなく、兄弟の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のグローバル変数に頼っているのと同じように、さまざまな理由で悪い考え方）や$親スコープを通じてデータを共有することに依存する必要はありません。存在しない可能性があります。

2つのソリューションの間にplnkr that tries to show the differenceを作成しました。

出典

2013-04-16 07:10:28 joakimbl

ほぼあります。私が持っている問題は、検索ボックスに入力してEnterキーを押すと、アプリケーションがリロードされ、検索データがajaxに取得されないということです。 – cyberwombat

私は、MainCtrlの内部で関数を呼び出すフォームでng-submitを実行しました.ManagedOrderCtrlでリロードをトリガーする方法はわかりません。 – cyberwombat

これはオリジナルの質問に記載されているものとは違ったものですが、plnkrで問題を再現できれば、私はそれを行えます – joakimbl

が...これを試してみてください

ビュー：

<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-アプリで... htmlタグにあなたのngのアプリを移動して、あなたがtitleなどを編集できることを行うことができますまあ！

出典

2013-04-16 06:33:03

ビューがコントローラにバインドされている場合、これは機能しません。 seachQueryはそのコントローラのスコープにアタッチされません。 –

スコープ階層を使用できます。

はこのようにあなたのHTMLに「外側」ng-controller定義を追加します。

それは$の親スコープになります。しかし、サービスを使ってデータを共有する必要はありません。 $scope.$parentのスコープを使用する必要はありません。 scope hierarchiesを使用できます。（そのページのスコープ階層セクションを参照してください）。それは本当に簡単です。あなたのMainCtrlで

は、あなたがこの持っていることがあります。

$scope.userName = "Aziz";

を次にMainCtrl内にネストされた（そして独自のスコープにユーザ名をオーバーライドしない）任意のコントローラでもユーザー名を持つことになります！あなたは{{userName}}のビューでinを使うことができます。

出典

2013-09-25 15:24:34 Jess

最初は、メインコントローラにあるng-viewにログインコントローラとログインビューがあると仮定し、メインコントローラをデータからどのように更新するべきですかログインビューから来ていますか？メインコントローラも再起動する必要があります。 –

メインコントローラースコープは、ネストされたスコープ内で使用できます。コードにブレークポイントを置き、$ scopeを見てください。 – Jess

AngularJS - ng-view以外の要素へのアクセス

答えて

関連する問題