javascript - AngularJS-如何实现Angular中的点击

Question

我是 angularjs 的新手。我被代码困住了，需要一些帮助。

我有一个名为监视列表 Controller 的 Controller ，我在其中获取要在监视列表中显示的数据。

但是，我只想在单击监视列表选项卡后显示数据。

这是 Html 代码:-

<div class='watchlist' >
      <button class='btn' id="watchList"  ng-click="fetchUserWatchlist()" watchlist-popover ng-controller="WatchlistController">
        <i class="hidden-tablet hidden-phone"></i>
        <span class = 'mywatchlist'>My Watchlist</span>
        <div class = 'watchlist-spinner ' ></div>
      </button>
    </div>

我的 Controller (监视列表):-

$scope.fetchUserWatchlist = function(pageno,callback){
        $scope.isLoading = true;
        $rootScope.isrequest = true;
        userAPI.myWatchlist({userid:$rootScope.getUser().userid,pageno:pageno}, function(r) {
            if (_.isNull(r.watchlistdata)) {
                if(typeof callback == 'function'){
                    callback();
                }
                if(pageno == 1){
                    $scope.watchlist = [];
                    $scope.watchlistCount = 0;
                }
                if (!$rootScope.apiCalled && pageno == 1){
                    if(!_.isUndefined($rootScope.watchlistClicked) && $rootScope.watchlistClicked){
                        $rootScope.$broadcast("watchlist::click");
                        imageLoadingIndicator();
                    }
                    $rootScope.apiCalled = true;
                }

                return false;
            }
            if (!_.isUndefined(r.watchlistdata.watchlist)){
                var rawData = [];
                var tempWatchlist = $scope.watchlist;

                if (_.isArray(r.watchlistdata.watchlist))
                    rawData = r.watchlistdata.watchlist;
                else
                    rawData = [r.watchlistdata.watchlist];

                if (pageno == 1) {
                    $scope.watchlistCount = parseInt(rawData[0].totalcount);
                }

                if ($scope.watchlist.length == 0 || ($scope.watchlist.length > 0 && pageno == 1))
                    $scope.watchlist = rawData;
                else
                    _.each(sortByDate(rawData),function(item){
                        if (! _.some(tempWatchlist,function(existingItem){ return existingItem.programmeid == item.programmeid; }))
                        {
                            $scope.watchlist.push(item);
                        }

                    });
                $scope.watchlistPage += 1;

                $timeout(function(){

                    if (!$rootScope.apiCalled && pageno == 1){
                        if(!_.isUndefined($rootScope.watchlistClicked) && $rootScope.watchlistClicked){
                            $rootScope.$broadcast("watchlist::click");
                            imageLoadingIndicator();
                        }
                        $rootScope.apiCalled = true;
                    }

                },1);
                $rootScope.isrequest = false;
                if(typeof callback == 'function'){
                    callback();
                }
            }else
                $rootScope.end = true;
        });

    };

所以基本上我想在 Controller 上实现 ng-click，但在上面的场景中它没有帮助..在单击按钮之前调用数据。

请帮我解决这个问题

Answer 1

ng-click 将使用范围:

ng-click="executeThis()"

将在$scope中查找名为“executeThis”的变量。例如:

$scope.executeThis = function(){
    // Do stuff you want
};

因此，当您单击具有此 ng-click 属性的元素时，将执行作用域上的executeThis 函数。在这个函数中你应该做任何你想做的事情。要在单击时显示某些内容，您可以使用该函数将范围上的变量设置为 true，然后使用 ng-show 来显示您想要显示的内容。

HTML:

<div ng-show="varX">someDiv</div>

Controller 内的JS:

$scope.varX = false;

因此，每当您将此变量设置为 true 时，就应该显示您的元素。

但是，我确实建议您遵循一些教程，因为我怀疑您尚未掌握 Angular 的工作原理。如果您想开发应用程序，那么了解 Angular 工作原理绝对是必要的。