javascript - 使用 ng-bind-html 在 HTML 集中进行 Angular 绑定(bind)

Question

我的基本用例是这样的 - 当命中特定路由时 ( #/abc )，我需要对服务器进行 POST 调用并呈现作为响应发送的 HTML。由于 HTML 取决于服务器调用，因此我不赞成将此逻辑写入 $routeProvider.when .

我的解决方案 -

• 打开路线
• 在 ng-view 中加载一个空白 View (用于应用的其他部分)
• 空白 View 包含一个带有 <div ng-bind-html=responseHtml></div> 的 div
• 在 Controller 中，创建 $http.post随着返回的数据，我将上面的表达式设置为 $scope.responseHtml = $sce.trustAsHtml(data);

这工作得很好，但是，我无法在responseHtml中设置任何绑定(bind)。

附带的 JSFiddle 在这里 - http://jsfiddle.net/prakhar1989/LX26M/2/

我不确定我正在做的事情是否是正确的方法(这是我的第一个 Ng 应用程序)。任何指导将不胜感激!

谢谢!

Answer 1

为您制作的:http://jsfiddle.net/BgW3u/

您将 HTML 传递给指令和相关范围，它将 $compile 它。

app.directive("ngCompile", function($compile){
    return {
        scope: {
            "ngCompile": "=",
            "ngCompileScope": "="
        },        
        link: function($scope, $element){                    
            $scope.compile = function(){
                $element.html($scope.ngCompile);  
                $compile($element.contents())($scope.ngCompileScope);
            }            
            $scope.$watch("ngCompile",function(){
               $scope.compile();
            });
        }
    }
});

或没有隔离范围:

app.directive('ngCompile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.ngCompile, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});