angularjs——如何在angular中实现click

Question

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

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

但是，我想只在单击watchlist选项卡时显示数据。

这是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>

我的控制器(观察名单中):

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

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

请帮我一下

Answer 1

ng-click将使用作用域:

ng-click="executeThis()"

将在$作用域中查找名为'executeThis'的变量。例如:

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

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

HTML:

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

JS inside controller:

$scope.varX = false;

所以当你将这个变量设置为true时，你的元素就会被显示。

然而，我建议你学习一些教程，因为我怀疑你还没有掌握angular是如何工作的。如果你想开发一个应用程序，了解angular的基本原理是绝对必要的。

Answer 2

try

<button class='btn' id="watchList" ng-click="myClickFunction()"  watchlist-popover ng-controller="WatchlistController">

最好的学习方法(IMHO)是文档:-)