Isolate the search directive

h/static/scripts/directives/simple-search.coffee

 simpleSearch = ['$parse', ($parse) ->
   uuid = 0
   link: (scope, elem, attr, ctrl) ->
-    _search = $parse(attr.onsearch)
-    _clear = $parse(attr.onclear)
-
     scope.viewId = uuid++
-    scope.dosearch = ->
-      _search(scope, {"this": scope.searchtext})
 
     scope.reset = (event) ->
       event.preventDefault()
-      scope.searchtext = ''
-      _clear(scope) if attr.onclear
+      scope.query = ''
+      scope.onClear?()
+
+    scope.search = (event) ->
+      event.preventDefault()
+      scope.query = scope.searchtext
 
-    scope.$watch attr.query, (query) ->
-      if query?
-        scope.searchtext = query
-        _search(scope, {"this": scope.searchtext})
+    scope.$watch 'query', (query, old) ->
+      return if query is old
+      scope.searchtext = query
+      if query
+        scope.onSearch?(query: scope.searchtext)
 
   restrict: 'C'
+  scope:
+    query: '='
+    onSearch: '&'
+    onClear: '&'
   template: '''
-            <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="dosearch()">
+            <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="search($event)">
               <input id="simple-search-{{viewId}}" class="simple-search-input" type="text" ng-model="searchtext" name="searchText" placeholder="Search…" />
               <label for="simple-search-{{viewId}}" class="simple-search-icon icon-search"></label>
               <button class="simple-search-clear" type="reset" ng-hide="!searchtext" ng-click="reset($event)">

tests/js/directives/simple-search-test.coffee

@@ -4,6 +4,7 @@ describe 'h.directives', ->
   $scope = null
   $compile = null
   fakeWindow = null
+  isolate = null
 
   beforeEach module('h.directives')
 
@@ -20,23 +21,24 @@ describe 'h.directives', ->
       template= '''
       <div class="simpleSearch"
             query="query"
-            onsearch="update(this)"
-            onclear="clear()">
+            on-search="update(query)"
+            on-clear="clear()">
       </div>
       '''
 
       $element = $compile(angular.element(template))($scope)
       $scope.$digest()
+      isolate = $element.isolateScope()
 
     it 'updates the search-bar', ->
       $scope.query = "Test query"
       $scope.$digest()
-      assert.equal($scope.searchtext, $scope.query)
+      assert.equal(isolate.searchtext, $scope.query)
 
     it 'calls the given search function', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-      $element.triggerHandler('submit')
+      isolate.searchtext = "Test query"
+      isolate.$digest()
+      $element.find('form').triggerHandler('submit')
       sinon.assert.calledWith($scope.update, "Test query")
 
     it 'calls the given clear function', ->
@@ -44,10 +46,10 @@ describe 'h.directives', ->
       assert($scope.clear.called)
 
     it 'clears the search-bar', ->
-      $scope.query = "Test query"
-      $scope.$digest()
+      isolate.searchtext = "Test query"
+      isolate.$digest()
       $element.find('.simple-search-clear').click()
-      assert.equal($scope.searchtext, '')
+      assert.equal(isolate.searchtext, '')
 
     it 'adds a class to the form when there is no input value', ->
       $form = $element.find('.simple-search-form')