javascript - 将 HTML 页面添加到 div

Question

我有 Angular 模板，其中有一个 div。我正在尝试将 html View ( .html )页面加载到基于 $watch 的 div 。但是，它永远不会将 html View 加载到 div 中。这是我的 Controller ，我只发布加载 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");
                }
                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>

任何人都可以建议我在哪里犯了错误，如果可能的话，请告诉我是否有一种 Angular 方法来做到这一点。

Answer 1

您需要添加 $scope.$apply() 或注入(inject) $timeout 并将其添加到代码中以通知 Angular 您的更改

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