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

我正在尝试使动画工作，当您单击搜索按钮时，应将其向右拉，以允许用户键入他们要搜索的任何内容。但是，ng-click似乎根本不会触发。我已经尝试过“警报（它正在工作）”；几次，但没有弹出。下面的代码，可能是什么问题的任何想法？

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;
      };
    }
  };
}]);

最佳答案

这是否有帮助：

    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>