Директива Angularjs append $ http request

Question

Я хочу создать директиву angularjs, которая добавляет новую директиву после вызова ajax.

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

     } 
    } 
}); 

Я хочу добавить директиву после результата $ http. Но он добавляет раньше. Я применил $ scope. $ Watch (scope.searchResult), но не работает.

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

Или вы можете использовать ng-if в html

Answer 2

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