2016-08-30 8 views
1

私は倍数の景色が、ナビゲーションバー上の同じ検索入力を持って、質問は次のとおりです。どのようview1Ctrl内のデータを更新するために、ナビゲーションバーに入力を使用し、View2CtrlまたはanyCtrl複数のルートと同じ検索入力

- ----- EDIT 1つの------- 私の質問は、私はview1Ctrl、View2CtrlまたはanyCtrlとコントローラがあれば知っているどのようにデータを更新するために、ナビゲーションバーに入力を使用したい

特異的ではなかったですserch入力が使用されていますか?実際のコードで

私はA $ HTTP GET関数を呼び出すと、私は疑問を明確にするplnkrを作成uptate、成功時に、アレイ

$scope.loadMore = function() { 
$scope.busy = true 
data.all(page) 
    .then(function success (response) { 
     var data = response.data 
     for(var i = 0; i < data.length; i++) { 
      $scope.array1.push(data[i]) 
     } 
     page++ 

     $scope.busy = false 
    }) 
} 

$scope.searchData = function (search) { 
$scope.busy = true 
$scope.array1 = []; 
data.all(page, search) 
    .then(function success (response) { 
     var data = response.data 
     for(var i = 0; i < data.length; i++) { 
      $scope.array1.push(data[i]) 
     } 
     page++ 

     $scope.busy = false 
    }) 
} 

を更新サービスを提供しています。助けのための

https://plnkr.co/edit/tENpWjPAzbV0GBg52L1V?p=preview

ありがとう!

App.js

var app = angular.module('plunker', ['ui.router']); 
 

 
app.config(function($stateProvider, $urlRouterProvider) { 
 
    $urlRouterProvider 
 
    .otherwise("/home/view1"); 
 

 
    $stateProvider 
 
    .state('home', { 
 
     url: "/home", 
 
     templateUrl: "./home-main.html", 
 
    }) 
 

 
    .state('home.view1', { 
 
    url: "/view1", 
 
    templateUrl: "./view1.html", 
 
    controller: "view1Ctrl" 
 
    }) 
 

 
    .state('home.view2', { 
 
    url: "/view2", 
 
    templateUrl: "./view2.html", 
 
    controller: "view2Ctrl" 
 
    }) 
 
}) 
 

 

 
app.directive('navbar', function() { 
 
    return { 
 
    restrict: 'EA', 
 
    templateUrl: './navbar.html', 
 
    controller: 'view1Ctrl' 
 
    } 
 
}) 
 

 
app.controller('view1Ctrl', function($scope) { 
 
    $scope.array1 = [1, 2, 3, 4]; 
 
    $scope.search = '' 
 

 
    $scope.onSearch = function() { 
 
    console.log('calling onSearch') 
 
    $scope.array1 = [1.1, 1.2, 1.3, 1.4] 
 
    } 
 
}); 
 

 
app.controller('view2Ctrl', function($scope) { 
 
    $scope.array1 = [1, 2, 3, 4]; 
 
    $scope.search = '' 
 

 
    $scope.onSearch = function() { 
 
    console.log('calling onSearch') 
 
    $scope.array1 = [1.1, 1.2, 1.3, 1.4] 
 
    } 
 
});

+0

は、サービスにあなたのonSearchを入れて、あなたはすべてのコントローラにそれを注入することができ、角度のサービスのためのgoogle。または、navbar専用のコントローラを作成し、それをすべてのルートで使用することができます –

+0

これは私の最初のアイデアでしたが、データが変更されたかどうかをコントローラがどのように知っていましたか? –

答えて

0

このネストされたビュー試してみてください。

.state('home.nav', { 
        url: "/", 

        '[email protected]': { 
         templateUrl: './navbar.html', 
         controller: 'view1Ctrl' 
        } 
       }) 

をしたり抽象使用することができます。

.state('my-app', { 
         abstract: true, 
         views: { 
          'navtest': { 
           templateUrl: './pathTonav', 
           controller: "navcontroller" 
          } 
         } 
        }) 

その後、あなたはあなたのルートのhtmlページに新しいカスタム要素を追加することができます。

<div ui-view="navtest"><\div> 
+0

nav1の入力を使って、view1Ctrl、View2Ctrl、またはanyCtrlのデータを更新したい –

0
app.directive('navbar', function() { 
    return { 
    restrict: 'EA', 
    templateUrl: './navbar.html', 
    controller: 'navbarCtrl' 
    } 
}); 

app.controller('navbarCtrl', function($scope){ 
    //your search stuff 
} 

<body ng-app='youreapp'> 
    <navbar></navbar> 
    <div ng-view></div> 
</body> 
+0

何かそんなこと? –

+0

いいえ、私はあなたがplunkerをチェックする場合、私はこの部分を解決しました、私はnav1のview1CtrlまたはView2Ctrlのデータを更新するために入力を使用したい –

関連する問題