在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'); 
}); 

让我知道，如果它帮助。