在Angularjs組件之間共享數據

Question

我在嘗試重構Angularjs 1.4 webapp以使用組件。
該web應用程序具有一個「搜索」輸入框的標題：主部分示出了根據在搜索輸入文本輸入的值過濾的聯繫人的列表。
我想使用的用戶界面路由器（從列表切換到詳細信息。我創建頁眉和指數組成，定義在我保存的搜索值的服務，定義的「決心」的狀態app.index那調用服務
問題是，當狀態被加載時，解析只完成一次，而我想更新每個jeypress的過濾器
在我的代碼中，我已經將搜索模型綁定到父組件和頭，所以我可以只創建重複每個模板內的頭組件的部件，我認爲這會工作，但我不知道是否有一個更優雅的方式做到這一點（信號不是很優雅，你不這麼認爲嗎？） 這裏是我的
App.html

<header-cnt-component search="$ctrl.search"></header-cnt-component> 
<ui-view> </ui-view> 

App.js

angular 
    .module('app') 
    .component('app', { 
    templateUrl: 'app/containers/App.html', 
    controller: App 
    }); 

function App() { 
    this.search = {}; 
} 

HeaderCnt.html

<nav class="navbar navbar-default" role="navigation"> 
    <div class="collapse navbar-collapse" id="nav-toggle"> 
     <form class="navbar-form navbar-right" role="search"> 
      <input type="text" class="form-control" placeholder="Search" ng-model="$ctrl.search.name" ng-keyup="$ctrl.startSearch()"> 
     </form> 
    </div> 
</nav> 

HeaderCnt.js

angular 
    .module('app') 
    .component('headerCntComponent', { 
    templateUrl: 'app/components/HeaderCnt.html', 
    controller: HeaderCnt, 
    bindings: { 
     search: '=' 
    } 
    }); 

    /** @ngInject */ 
function HeaderCnt(contactsService, searchService, $location) { 
    this.contactsService = contactsService; 
    this.searchService = searchService; 
    this.location = $location; 
    this.contacts = contactsService.get(); 
} 

HeaderCnt.prototype = { 

    startSearch: function() { 
    this.searchService.set(this.search); 
    this.location.path('/'); 
    } 
}; 

的index.html

<div class="table-responsive"> 
    <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Email Address</th> 
       <th>Phone Number</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="contact in $ctrl.contacts | filter:$ctrl.search"> 
       <td>{{contact.name}}</td> 
       <td>{{contact.email}}</td> 
       <td>{{contact.phone}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

個

Index.js

angular 
    .module('app') 
    .component('indexComponent', { 
    templateUrl: 'app/components/Index.html', 
    controller: Index, 
    bindings: { 
     search: '=' 
    } 
    }); 

/** @ngInject */ 
function Index(contactsService) { 
    this.contactsService = contactsService; 
    this.contacts = contactsService.get(); 
} 

Index.prototype = { 
}; 

search.js

function SearchService() { 
    var search = {}; 

    this.get = function() { 
    return search; 
    }; 
    this.set = function (searchData) { 
    search = searchData; 
    }; 
} 

route.js

angular 
    .module('app') 
    .config(routesConfig); 

/** @ngInject */ 
function routesConfig($stateProvider, $urlRouterProvider, $locationProvider) { 
    $locationProvider.html5Mode(true).hashPrefix('!'); 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('app', { 
     component: 'app' 
    }) 
    .state('app.index', { 
     url: '/', 
     component: 'indexComponent', 
     resolve: { 
     search: function (searchService) { 
      // var search = {}; 
      // search.name = 'aus'; 
      return searchService.get(); 
      // return search; 
     } 
     } 
    }); 
} 

Answer 1

如果我給你正確的，這可能幫助。 我會爲搜索添加新的狀態：

.state('app.index.search', { 
     url: '/search/:searchString', 
     component: 'indexComponent', 
     resolve: { 
     search: $stateParams => $stateParams.searchString 
     } 
     } 
    }) 

，如果你已經在indexComponent休息搜索結合應該是相當簡單的。

/搜索/一些用戶的搜索

將解決您的狀態，搜索字符串，如果你想切換到特定的搜索字符串狀態控制器上，你可以使用：

$state.go('app.index.search', searchString) 

一件事，您可以使用ng-model-options = {debounce：500}在輸入（0.5s）後獲得延遲，並將觀察者放在控制器上以更改模型。

讓你輸入HTML：

<input type="text" class="form-control" placeholder="Search" ng-model="$ctrl.search.name" ng-model-options="{debounce: 500}"/> 

和控制器：

this.$scope.$watch('$ctrl.search.name', (newVal, oldVal) => { 
    newVal && $state.go('app.index.search', newVal'); 
}); 

讓我知道，如果它幫助。