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 ?

You're watching $scope.currentItem - try watching $scope.currentConfig maybe??? — Dave Lunny
– Dave Lunny, Commented Jan 26, 2015 at 17:31
The watch is working fine bcz I can see the html elements. But scope object is not attached to the elements. — Aj1
– Aj1, Commented Jan 26, 2015 at 17:54
You made a mistake by attempting to access the DOM from the controller. Read this SO question first: stackoverflow.com/questions/14994391/… — New Dev
– New Dev, Commented Jan 26, 2015 at 18:54
If you are doing a .load the jQuery way, the hack around this to do a $compile. See my answer below. — SoluableNonagon
– SoluableNonagon, Commented Jan 26, 2015 at 19:36

SoluableNonagon · Accepted Answer · 2015-01-26 19:40:02Z

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

Collectives™ on Stack Overflow

Add Html page to div in angular template

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related