What are the different ways to invoke an AngularJS Controller?

26 views Asked by At

Seeking clarification as to what I am missing from my AngularJS (1.5.6) code. The current source code I'm working with does the following:

  1. Defines var model json
  2. Calls init()
  3. Runs init() which retrieves local storage and returns a query.

The following is an excerpt of the source code. Currently it is not working. The code intentions are to highlight the search box when it is not empty. Note: queryFoo is mockup i.e. a placeholder.

AngularJS

(function() {
  angular
    .module("myApp")
    .controller("fooController", fooController);

  function fooController() {
    var model = this;
    model.queryFoo = queryFoo;
    model.search = "";
    //model.styleSearch = 'search-empty';
    model.highlightActiveSearch = highlightActiveSearch;

    init();

    function init() {
      return queryFoo();
    }

    function highlightActiveSearch() {
      model.styleSearch = model.search.length >= 1
        ? "search-active"
        : "search-empty";
    }
  }
})();

CSS

.search-active {
  background-color: green;
  color: white;
}

HTML

<div ng-app="myApp" ng-controller="fooController as fc">
  <input class="form-control input-sm valign" type="search" placeholder="Search" ng-model="fc.search" ng-change="fc.highlightActiveSearch()" ng-class="fc.styleSearch" />
</div>
0

There are 0 answers