Угловой: используя transclude с нг-Bind-HTML

Question

У меня есть следующие угловой установки:

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

app.filter('unsafe', function($sce) { 
    return $sce.trustAsHtml; 
}); 

app.controller('SearchController', ['$scope', '$http', function($scope, $http) { 
    $scope.searchString = ''; 
    $scope.searchType = 'Artist'; 
    $scope.updateHtml = function() { 
    $http.get('/search', { 
     params: { 
     searchString: $scope.searchString, 
     searchType: $scope.searchType 
     } 
    }).success(function(data) { 
     $scope.html = data; 
    }).error(function(err){ 
     $scope.html = err; 
    }); 
    }; 
    $scope.updateHtml(); 
}]); 

app.directive('searchDirective', function() { 
    return { 
    restrict: 'A', 
    transclude: true, 
    template: '<div ng-bind-html="html | unsafe" ng-transclude></div>' 
    }; 
}); 

Это тянет сырой HTML разметку через AJAX в контроллере и сохраняет его в @scope.html. В директиве этот html вставляется в DOM через ng-bind-html.

HTML (нефрит) выглядит следующим образом:

#search(ng-controller="SearchController" search-directive) 

Это в основном работает. Но внутри этого html, который включен, у меня есть какое-то перекрестное содержимое, например {{searchType}}, которое я хочу решить. К сожалению, это не так, это показывает «{{searchType}}» в браузере. Что я могу изменить, чтобы сделать трансклюзию?

Я читал около $compile и $transclude, но я не знаю, как его использовать, или если это может помочь мне решить мою проблему. спасибо!

Answer 1

с помощью Патрика, я смог его решить. я изменил свой контроллер на

app.controller('SearchController', ['$scope', '$http', '$interpolate', 
       function($scope, $http, $interpolate) { 
    $scope.searchString = ''; 
    $scope.searchType = 'Artist'; 
    $scope.updateHtml = function() { 
     $http.get('/search', { 
     params: { 
      searchString: $scope.searchString, 
      searchType: $scope.searchType 
     } 
     }).success(function(data) { 
     $scope.html = $interpolate(data)($scope); // <<-- difference here 
     }).error(function(err){ 
     $scope.html = err; 
     }); 
    }; 
    $scope.updateHtml(); 
    }]); 

и теперь мой html интерполирован на основе пройденного объема. Спасибо!

редактировать: $interpolate только для визуализации DOM и разбор его через прицел. он просто возвращает простой html. если вам нужно на самом деле получить полный рабочий шаблон html, с его угловым кодом, используйте $compile. я нашел this answer чрезвычайно полезной при сортировке различий между $interpolate, $compile и $parse.