Angularjs directive append $http request

Question

I want to create an angularjs directive that appends new directive after ajax call.

var app = angular.module("app",[]);

// This directive is simple search operation.

app.directive("search", function("$http", function($http){
    return {
        restrict: "E",
        template: '<input type="text" ng-model="searchText"/> <button ng-click="search()">Search</button>',
        controller: function($scope){
            $scope.search = function(){
                $http({url: "..."})
                    .then(function(response){
                        $scope.searchResult = response.data;
                    });
            }
        },
        link: function(scope,element){
            var directiveHtml = ('<search-result></search-result>');
            var directiveElement = $compile(directiveHtml)(scope);
            element.append(directiveElement);
        }       
    }   
});

app.directive("searchResult", function(){
    return {
        restrict: "E",
        template: "list of the search result",
        link: function(scope,element){

        }
    }
});

I want to append the directive after $http result. But it appends before. I applied $scope.$watch(scope.searchResult) but does not work.

$watch should also have a handler. i.e. a function to execute when the value changes - $scope.$watch([expression returning watched value], [change handler], [objectEquality?]); — Abbas Kararawala
– Abbas Kararawala, Commented Sep 29, 2016 at 8:32

Max Koretskyi · Accepted Answer · 2016-09-29 08:38:43Z

1

    controller: function($scope){
        $scope.search = function(){
            $http({url: "..."})
                .then(function(response){
                    $scope.searchResult = response.data;
                });
        }
    },
    link: function(scope,element){
        $scope.$watch('searchResult', function(results) {
          if (results) {
               var directiveHtml = ('<search-result></search-result>');
               var directiveElement = $compile(directiveHtml)(scope);
               element.append(directiveElement);
          }
        })
    }

Or you can use ng-if in html

answered Sep 29, 2016 at 8:38

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

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

Comments

Abdul · Accepted Answer · 2016-09-29 10:07:46Z

0

controller: function($scope, $http){
            $scope.search = function(){
                $http({url: "..."})
                    .then(function(response){
                        $scope.searchResult = response.data;
                        var directiveHtml = ('<search-result></search-result>');
                        var directiveElement = $compile(directiveHtml)($scope);
                        angular.element(document.getElementById('id')).append(directiveElement);
                    });
            }
        }

answered Sep 29, 2016 at 10:07

Abdul

11 silver badge1 bronze badge

1 Comment

Abdul Over a year ago

Link function will be called while rendering directive and at the same time element will be appended, instead of appending it in link append it in ajax response in controller. Give id to searh directive e.g. <search-e id="id"></search-e> ,

Collectives™ on Stack Overflow

Angularjs directive append $http request

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related