Question

我试图重构一个Angularjs 1.4 webapp来使用组件该网络应用程序的标题包含＆＃34;搜索＆＃34;输入框：主要部分显示根据在搜索输入文本中输入的值过滤的联系人列表我试图使用ui-router（从列表切换到详细信息。我已经创建了Header和Index组件，定义了一个我存储搜索值的服务，用＆＃定义了一个状态app.index 34;解决＆＃34;调用服务问题是，在加载状态时只执行一次解析，而我想更新每个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中的搜索有绑定，那么休息应该相当简单。

/ search / some user search

将使用搜索字符串解析为您的状态，如果您想在控制器上切换到特定的searchString状态，则可以使用

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

如果有帮助，请告诉我。

在Angularjs组件之间共享数据

1 个答案: