Angularjs指令追加$http请求

Angularjs directive append $http request

本文关键字：http 请求追加指令 Angularjs 更新时间：2023-09-26

我想创建一个在ajax调用后附加新指令的angularjs指令。

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 result之后附加指令。但它在前面。我应用$scope.$watch(scope. searchresult)，但不工作

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

或者在html

中使用ng-if

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