2

我有以下角度设置：

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

它通过控制器中的 ajax 提取原始 html 标记并将其存储在@scope.html. 在指令中，这个 html 通过ng-bind-html.

html（玉）看起来如下：

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

它基本上有效。但是在包含的这个 html 中，我有一些半透明的内容，就像{{searchType}}我想要解决的那样。不幸的是，事实并非如此，它在浏览器中显示“{{searchType}}”。我可以改变什么来使嵌入工作？

我阅读了$compileand $transclude，但我不知道如何使用它或者它是否可以帮助我解决我的问题。谢谢！

4

1 回答 1

2

在帕特里克的帮助下，我能够解决它。我将控制器更改为

 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. 我发现这个答案对于理清和之间$interpolate的差异非常有帮助。$compile$parse

于 2014-12-08T20:19:13.457 回答