Ett direktiv som söker på backend utifrån användares val på frontend

Idag har vi tittat på hur vi kan använda kodexemplet från ett tidigare inlägg om sök/filtrera i ett direktiv som gör att användare kan sökningar på backend med hjälp av ett grafiskt gränssnitt på frontend.

Vi har använt oss av vårt dummydataGen direktiv för att se till att det finns data att söka på. Sedan har vi skapat ett nytt direktiv som heter ”selectedSearches” som laddar in vårt formulär samt resultatslista. Allt detta har vi lagt under en ny frontend-route ”/search”.

Ladda ner dagens kod här.

Du kan själv göra sökningar på ”/search” och hittar all kod i ”/directives/selectedSearches.*” filerna.

Några viktiga punkter om koden i selectedSearches direktivet:

scope.highlight() i link

scope.highlight = function() {
  // use a ternary to decide which class to use
  // if results, use "has-success", else use "has-error"
  var className = scope.results.length > 0 ? "has-success" : "has-error";

  // add the status class to our form
  elem.find('form').addClass(className);

  // remove the class a second later
  setTimeout(function() {
    elem.find('form').removeClass(className);
  }, 1000);
};

Anropas efter var sökning och ger användare visuell feedback på om deras sökning hittade resultat eller ej

scope.useSubmit i controller

$scope.useSubmit = false;

Avgör om formuläret ska använda $watchGroup (skicka query för varje ändring) eller ng-submit (skicka fråga vid form submit). Du ändrar denna booleanen i controllern.

scope.sendQuery() i controller

$scope.sendQuery = function () {
   ...
}

Använder kod från tidigare inlägg för att skicka queries till backend med hjälp av $resource. Kallar på $scope.highlight() när AJAX anropet är klart.

0 votes