將HTML頁面添加到div

Question

我有角模板，其中有一個div。 我試圖基於$ watch將html視圖（.html）頁面加載到div。 但是，它永遠不會將html視圖加載到div。 這是我的控制器，我只發布了加載html視圖的代碼部分。

   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");
                }
                if ($scope.MeritType == "Potential") {
                    $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyPercentChart.html");
                }
            }
           // $scope.radioButtonHandler($scope.MeritType);
        });
});

這是我的HTML。

<div class="locationChart_container"> 
<div class="locationChart_left">
</div>
<div class="locationChart_right">
</div>

有人可以向我建議我在哪里做錯了，如果可能的話，請告訴我是否有解決此問題的方法。

Answer 1

您需要添加$ scope。$ apply（）或注入$ timeout並將其添加到代碼中以通知您的更改角度

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