Friday, August 1, 2014

AngularJS: $watch is very useful to defer the template showing, together with JQuery

When I have 2 controllers being called and one controller's post parameters rely on the first controller's data fetched from server, I need to hide the template being used by the 2nd controller (before it fully loaded to the browser). It took me a while to find the right solution. And here is the one I consider comfortable, using $watch

1. create a directive with $watch to keep checking
xxxXXXApp.directive("ngDivload", function () {
    return function (scope, element, attrs) {
        scope.$watch("xxxResultModel.Header", function (obj) {
            var value = obj || null;            
            if (value){
                    $('.tgXXX .searchCount').show();
                    $('.searchResult').show();
            }
                
        });
    };
});
xxxResultModel.Header is the $scope object being assigned at the end of the 2nd controller operation

2. Add this directive to the template for the 2nd controller

<div ng-cloak class="ng-cloak searchResult" ng-Divload="" style="display:none;">

No comments:

Post a Comment