Директива с шаблоном. AngularJS

Question

Я имею немного вопрос пытается перевести чисто JS в директиве я работаю:

первый я имел это так:

var searchbox={ 
 
\t topPos_open:0, topPos_close:-50, isOpen:false, 
 
\t open:function(){ 
 
\t  var box=document.getElementById("searchbox"); 
 
\t  box.style.top=this.topPos_open+"px"; 
 
     document.getElementById("searchfield").focus(); 
 
     this.isOpen=true; 
 
\t }, 
 
\t close:function(){ 
 
\t  var box=document.getElementById("searchbox"); 
 
\t  box.style.top=this.topPos_close+"px"; 
 
\t  this.isOpen=false; 
 
\t }, 
 
\t pop:function(){ 
 
\t  !this.isOpen?this.open():this.close(); 
 
\t }, 
 
\t clear:function(){ 
 
\t \t document.getElementById("searchfield").value=""; 
 
\t } 
 
}

#searchbox{position:fixed; top:-50px; left:0px; width:100%; height:60px; background-color:rgba(135, 206, 235, 1); -webkit-transition:top 0.5s ease 0s; -moz-transition:top 0.5s ease 0s; transition:top 0.5s ease 0s;} 
 
#searchbox input{border:0px none; margin:0px 10px 0px 10px; padding:0px; width:80%; font-size:20px;} 
 
#searchbox #input{float:left; background-color:rgba(255, 255, 255, 1); border:1px solid #dddddd; border-radius:20px; margin:5px; padding:5px; width:70%; min-width:250px;} 
 
#searchbox #close{float:right; padding:10px:} 
 
#searchbox button{border:0px none; background-color:transparent; font-size:20px; cursor:pointer;} 
 
#searchbox #dots{clear:both; text-align:center; font-size:25px; cursor:pointer;}

<div id="searchbox"> 
 
    <div id="input"> 
 
     <input type="text" id="searchfield" value=""> 
 
     <button type="button" onclick="searchbox.clear()"> 
 
     X 
 
     </button> 
 
    </div> 
 
    <div id="close"> 
 
     <button type="button" onclick="searchbox.close()"> 
 
     Cancel 
 
     </button></div> 
 
    <div id="dots" onclick="searchbox.pop()"> 
 
     ...... 
 
    </div> 
 
</div> 
 

 

 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
Click the dots

теперь я обновляя некоторые функции, и я пытаюсь преобразовать это в директиву, так что это я до сих пор:

.directive('searchbox', function() { 
    return { 
    template: '<div id="searchbox"><div id="input"><input type="search" id="searchfield" value=""></div></div>', 
    restrict: 'E', 
    link: function(element, scope) { 
     var searchbox = { 
      topPosOpen: 0, 
      topPosClose: -70, 
      isOpen: false, 
      open:function() { 
      var box = document.getElementById('searchbox'); 
      box.style.top = this.topPosOpen + 'px'; 
      document.getElementById('searchfield').focus(); 
      this.isOpen = true; 
      }, 
      close:function() { 
      var box = document.getElementById('searchbox'); 
      box.style.top = this.topPosClose + 'px'; 
      this.isOpen = false; 
      }, 
      pop:function() { 
      !this.isOpen ? this.open() : this.close(); 
      }, 
      clear:function() { 
      document.getElementById('searchfield').value = ''; 
      } 
     } 
    } 
    } 
}); 

HTML:

<searchbox></searchbox> 

, но он не работает вообще, какие-либо предложения?

Answer 1

Вам необходимо определить дополнительные методы контроллера следующим образом:

.directive('searchbox', function() { 
    return { 
    template: '<div id="searchbox"><div id="input"><input type="search" id="searchfield" value=""></div></div>',  
    restrict: 'E', 
    scope: {}, 
    controller: function ($scope) { 
     $scope.topPosOpen=0; 
     $scope.topPosClose=-70; 
     $scope.isOpen = false; 
     $scope.open = function() { 
      var box = document.getElementById('searchbox'); 
      box.style.top = $scope.topPosOpen + 'px'; 
      document.getElementById('searchfield').focus(); 
      $scope.isOpen = true; 
      }; 

     $scope.close = function() { 
      var box = document.getElementById('searchbox'); 
      box.style.top = $scope.topPosClose + 'px'; 
      $scope.isOpen = false; 
      }; 

      $scope.pop = function() { 
      !$scope.isOpen ? $scope.open() : $scope.close(); 
      }; 

      $scope.clear = function() { 
      document.getElementById('searchfield').value = ''; 
      } 
    } 
    } 
});