Add Html page to div in angular template

Question

I have angular template , which has a div. I am trying to load html view ( .html ) page to the div based on a $watch. The view are loaded properly, but not attached to $scope object. Here is my controller , I am only posting the part of the code that loads the html view.

var filtertemplate = "#locationChart_right";
$scope.templateUrl = '/_layouts/AngularControls/MyController/Views/MyChart.html';
$scope.$watch("currentItem", function () {

$scope.currentConfig = $rootScope.currentItem;
LocDetailsChartService.getUserPrefs()
.then(function (response) {
    var data = response.data.ChartsUserPrefs;
    $scope.MeritType = data.MeritType;
    if ($scope.MeritType !== undefined) {
        if ($scope.MeritType == "Score") {
            $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyScoreChart.html");
            $scope.$apply()
        }
        if ($scope.MeritType == "Potential") {
            $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyPercentChart.html");
            $scope.$apply()
        }
    }
   // $scope.radioButtonHandler($scope.MeritType);
});
});

HTML

Can anybody suggest me where I am doing the mistake ?

Answer 1

Well, you are mixing jQuery with Angular where it seems you shouldn't be.

You can dynamically load html templates into your page in a much easier manner using ng-include.

Lets say you have a div

<div id='locationChart_right'></div> <!-- traditionally you use an id to find this div and replace the content... the jQuery way -->

but with Angular, you can just assign a variable with ng-include to change the template.

<div ng-include="templateToLoad"></div>

now, in your JS, all you need is a $scope variable to assign which template to load.

LocDetailsChartService.getUserPrefs()
.then(function (response) {
    var data = response.data.ChartsUserPrefs;
    $scope.MeritType = data.MeritType;
    if ($scope.MeritType !== undefined) {
        if ($scope.MeritType == "Score") {
            $scope.templateToLoad =  "/_layouts/AngularControls/MyController/Views/MyScoreChart.html";
        }
        if ($scope.MeritType == "Potential") {
            $scope.templateToLoad = "/_layouts/AngularControls/MyController/Views/MyPercentChart.html";
        }
    }
});

This will automatically load the proper template and update scope objects in your view.

IF you need to keep the jQuery way for whatever reason, you will need to force a $compile on the element to update the $scope values.

like so:

$compile($(filtertemplate)($scope);

In Context:

if ($scope.MeritType == "Potential") {
    $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyPercentChart.html");
        $compile($(filtertemplate))($scope);
    }
}