【问题标题】:ng-click wont trigger, function not working. Could it be scope?ng-click 不会触发,功能不起作用。可能是范围吗?
【发布时间】:2015-06-08 15:35:38
【问题描述】:

我正在尝试制作动画,当您单击搜索按钮时,它应该被拉到右侧,以便用户输入他们想要搜索的任何内容。但是,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;
      };
    }
  };
}]);

【问题讨论】:

  • 您的 ng-click 似乎超出了指令的范围。
  • 抱歉,我还在学习中。超出指令范围是什么意思?是代码的位置,还是我必须在按钮内调用范围?
  • 上面的html/dist/assets/tpl/directives/navbar-search.html一样吗?提交有效吗?你能提供一个jsfiddle吗?
  • 是的,上面的 html 与 /dist/assets/tpl/directives/navbar-search.html 减去
  • 完全相同。我不相信提交有效,因为绝对没有发生任何事情。动画应该触发但不会触发。
  • 你能提供 plunker 或 jsfiddle 吗?
  • 标签: javascript jquery html asp.net angularjs


    【解决方案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>
    

    【讨论】:

    • 嗯,还是什么都没有。不太清楚发生了什么。现在重写JS,我相信和那个有关
    • 已修复,在&lt;div class="pull-right"&gt; 中缺少navbar-search 感谢您的帮助!
    • @aromans 如果问题已解决,您需要将答案标记为正确
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签