javascript - ng-click 不会触发，功能不起作用。可以是范围吗？

Question

我正在尝试让动画起作用，当您单击搜索按钮时，它应该被拉到右侧，以便允许用户输入他们想要搜索的任何内容。然而，ng-click 似乎根本没有触发。我尝试过“alert('它正在工作');”多次但什么也没有弹出。代码如下，您知道问题可能是什么吗？

HTML:

<li class="pull-right">
    <div>
    <!-- ngIf: showNavbarSearch --><div ng-if="showNavbarSearch" class="mat-slide-right pull-right ng-scope">
                                <form class="search-form form-inline ng-valid pull-left ng-pristine" ng-show="showNavbarSearch" ng-submit="submitNavbarSearch()">
                                    <div class="form-group">
                                        <label class="sr-only" for="search-input">Search</label>
                                        <input type="text" class="form-control" id="search-input" placeholder="Search" autofocus="">
                                    </div>
                                </form>
                            </div><!-- end ngIf: showNavbarSearch -->

                            <div class="pull-right">
                                <button ng-click="toggleSearch()" class="btn btn-sm btn-link pull-left withoutripple">
                                    <i class="md md-search f20"></i>
                                </button>
    </div>
</li>

JS:

app.directive('navbarSearch', ['$timeout', function ($timeout) {
  return {
    restrict: 'A',
    templateUrl: '/dist/assets/tpl/directives/navbar-search.html',
    link: function($scope, element, attrs) {
      $scope.showNavbarSearch = false;

      $scope.toggleSearch = function () {
        $scope.showNavbarSearch = !$scope.showNavbarSearch;
      };

      $scope.submitNavbarSearch = function(){
        $scope.showNavbarSearch = false;
      };
    }
  };
}]);

Answer 1

这有帮助吗:

    app.directive('navbarSearch', [ function () {
    return {
        restrict: 'A',
        templateUrl: 'navbar-search.html',
        controller: function($scope){
          $scope.showNavbarSearch = false;
          $scope.mySearch = "";
          $scope.submitNavbarSearch = function(myVal){
            $scope.mySearch = myVal;
            console.log("submitting: " + $scope.mySearch);
            $scope.showNavbarSearch = false;
          }

          $scope.toggleSearch = function(){
            $scope.showNavbarSearch = !$scope.showNavbarSearch;
          }
        },

    };
}]);

模板:

<li class="pull-right">
<div ng-if="showNavbarSearch" class="mat-slide-right pull-right ng-scope">
  <form class="search-form form-inline ng-valid pull-left ng-pristine" ng-show="showNavbarSearch" ng-submit="submitNavbarSearch(mySearch)">
      <div class="form-group">
          <label class="sr-only" for="search-input">Search</label>
          <input type="text" ng-model="mySearch" placeholder="Search" autofocus="">
      </div>
  </form>
</div><!-- end ngIf: showNavbarSearch -->
<br />
<div class="pull-right">
  <button ng-click="toggleSearch()">
      <i class="md md-search f20">Toggle search</i>
  </button>
</div>
</li>

用法:

<div navbar-search>

    </div>