Angularjs指令追加$ http请求

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