0

I am a newbie in angularjs. I was stuck on a code and wanted some help.

I am having a controller called watchlist controller in which I am getting the data which is to be displayed in the watchlist.

However I want to display the data only once the watchlist tab is clicked.

This is the Html code :-

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

My controller(watchlist):-

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

    };

So basically I want to implement ng-click on the controller but here in the above scenario it does not help..The data is called before the button is clicked.

Please help me with this

Improve this question
2
  • 1
    What is watchlist-popover? Please provide Plunker or something to get a proper answer. Commented Aug 18, 2014 at 8:15
  • 1
    Directly linked from the main AngularJs website the free codeschool course Learn to build an application using Angular.js It's a great way to get into the basics of AngularJs - Hope this helps. Commented Aug 18, 2014 at 8:23

2 Answers 2

Reset to default
2

ng-click will work using the scope:

ng-click="executeThis()"

will look in the $scope for a variable named 'executeThis'. F.e.:

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

So when you click the element that has this ng-click attribute, the executeThis function on the scope will be executed. In this function you should do whatever you want to do. To display something when you click it, you could use the function to set a variable on the scope to true and then use ng-show to display what you want to display.

HTML:

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

JS inside controller:

$scope.varX = false;

So whenever you set this variable to true, your element should be shown.

However, I do suggest following some tutorials since I suspect you don't yet grasp how angular works.. Understanding how the fundamentals of angular work is definitely necessary if you want to develop an app.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

@Tsasken..I have tried to implement ng-click as you said.But it does not help me.Please see my updated code
Ok, so right now you have "$scope.isLoading = true;" that says you are still loading data. Make sure the variable is initiated as true when the controller is initiated. Then use '<span class = 'mywatchlist' ng-hide="isLoading">My Watchlist</span>' to hide and show the watchlist..
Whenever you set isLoading to false, the watchlist should show.. As long as I understood correctly that the watchlist is in the span element..
@Tsasken..I tried what you said..But the span/button is getting hidden..actually want to display data on click
Oh, I think I was wrong before, the 'ng-hide="isLoading"' attribute should be on the element containing the data. Not on the span / button.. If it's still not working I suggest you try to create a jsfiddle / plnkr for further troubleshooting..
|
0

try

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

The best way to learn (IMHO) is documentation :-)

Improve this answer

2 Comments

@i100..I tried the above code ..But its not working.I want to display the data only when I click on the watchlist button but in my case it is loading the data before click
I guess your ng-controller="WatchlistController" should be attached on the parent div not on the button. It does not make sense for me to bind controler with a button... But I might misunderstand the logic... Look here: docs.angularjs.org/api/ng/directive/ngController

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.