Question

我有角度模板，有一个div。我试图基于$ watch将html视图（.html）页面加载到div。视图已正确加载，但未附加到$ scope对象。这是我的控制器，我只发布加载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");
            $scope.$apply()
        }
        if ($scope.MeritType == "Potential") {
            $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyPercentChart.html");
            $scope.$apply()
        }
    }
   // $scope.radioButtonHandler($scope.MeritType);
});
});

HTML

有人可以告诉我我在做错的地方吗？

Answer 1

好吧，你正在将jQuery和Angular混合在一起，你似乎不应该这样。

您可以使用ng-include以更简单的方式将html模板动态加载到您的页面中。

让我们说你有一个div

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

但是使用Angular，您只需使用ng-include分配变量即可更改模板。

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

现在，在您的JS中，您只需要一个$ scope变量来指定要加载的模板。

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

这将自动加载适当的模板并更新视图中的范围对象。

IF 你需要保持jQuery方式无论出于何种原因，你需要在元素上强制$ compile来更新$ scope值。

像这样：

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

在上下文中：

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

在角度模板中将Html页面添加到div

1 个答案: