Question

我在尝试将纯JS转换为我正在处理的指令时遇到了一些问题：

首先我这样做了：

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

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

带有模板问题的指令。 AngularJS

1 个答案: