와 transclude를 사용하여 나는 다음과 같은 각 설정이 있습니다각도 : NG-바인드 HTML
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>'
};
});
그것을 @scope.html
에서 컨트롤러와 상점에서 아약스를 통해 원시 HTML 태그를 가져옵니다을. 지시문에서이 html은 ng-bind-html
을 통해 DOM에 삽입됩니다. 그것은 기본적으로 작동
#search(ng-controller="SearchController" search-directive)
을 다음과 같이
HTML (옥)가 보인다. 하지만 포함 된이 html 안에는 내가 풀리고 싶은 {{searchType}}
과 같은 독점적 인 콘텐츠가 있습니다. 불행히도, 그 경우가 아니라 브라우저에 "{{searchType}}"이 표시됩니다. 출제 작업을하기 위해 무엇을 변경할 수 있습니까?
약 $compile
과 $transclude
을 읽었지 만 사용 방법을 모르거나 내 문제를 해결하는 데 도움이되는지 확인합니다. 고마워!
컨트롤러에서 $ scope.html로 설정하기 전에 html을 $ interpolate하십시오. 이 질문에 대한 답변보기 : http://stackoverflow.com/questions/20796102/angularjs-data-bind-in-ng-bind-html – Patrick
위대한, $ interpolate가 트릭을 수행합니다! 고맙습니다! – Hinrich