current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have the following controller

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 will load the dynamic templates which holds another controller

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

Here is the controller for dynamic template

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

Here is the html template loaded dynamically

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

Problem is in aboutcontroller disname is not printing as Relicset instead showing {{ disname }} How to handle such case.

share|improve this question
    
Why don't you use ng-include –  Chandermani May 22 at 16:53

1 Answer 1

up vote 0 down vote

the problem is that the html you loaded has to be compiled by angular, in this case I think the best solution should be to do a directive and use the compile in your link function.

here is a little example

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

this example will guide you. it wont work 100% maybe you have to add a controller, and a scope check this link for more info https://docs.angularjs.org/guide/directive

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.