Question

我有以下控制器

app.controller('PageController', ['$scope', '$http', 'PageService', '$sce', function($scope, $http, PageService, $sce) {

////////changetab is ng-click event
$scope.changetab = function(url) {
        PageService.http.get(app.genurl(url)).success(function(data) {
            $scope.datas = $sce.trustAsHtml(data);
        })
    }

}])

ng-bind-html将加载包含另一个控制器的动态模板

<div ng-controller="PageController">
<div ng-bind-html="datas"></div>
</div>

这是动态模板的控制器

app.controller('AboutController', ['$scope', function($scope) {
    $scope.disname = 'Relicset';
}])

这是动态加载的html模板

<div ng-controller="AboutController">
    {{ disname }}
</div>

问题在于aboutcontroller disname没有打印为Relicset而是显示{{disname}}如何处理这种情况。

Answer 1

问题是你加载的html必须用angular编译，在这种情况下我认为最好的解决方案应该是做一个指令并在你的链接函数中使用compile。

这是一个小例子

app.diractive('tabs', function (PageService, $sce, $compile) {
    return {
         restrict: 'E',
         replace: true,
         template: '<div>{{datas}}</div>', //option 1, use template (it is compiled by angular)
         link: function (scope, element) {                 
             PageService.http.get(app.genurl(url)).success(function(data) {
                  scope.datas = $sce.trustAsHtml(data);
                  //this is another option, compile the recived data
                  //angular.element(element).html($compile(data)(scope))
             })
         }
    };
});

这个例子将指导你。它不会工作100％也许你必须添加一个控制器，范围检查此链接以获取更多信息https://docs.angularjs.org/guide/directive

动态添加模板使用$ http控制器无法在angularjs中工作

1 个答案: