在 Angular 中，当我收到一些新数据时，如何强制模板重新编译

In Angular, how to force template to recompile when I receive some new data?

本文关键字：何强制 编译 新编译 Angular 数据 新数据      更新时间：2023-09-26

假设我有一个指令，其中模板包含一些数据，这些数据提供了另一个JS来绘制饼图：

mymodule.directive('myGauge', ['$http', function() {
    return {
        restrict: 'E',
        template: '<div class="quota-dynamic"><h3>Limit Summary</h3><div class="d3_quota_bar"><div class="pie_chart" data-used="{$ dataUsed $}"></div></div>'
    }
}]);

而"pie_chart"在另一个JS中使用，它依赖于数据使用的值来绘制饼图。

我有另一个接收数据的控制器：

mymodule.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.$parent.$watch("toggled", function(toggled) {
        var tenant_id = 1234;
        if (!$scope.$parent.isCollapsed()) {
            $http({
                method: 'get',
                url: 'http://localhost:8080/admin/projects/' + tenant_id + '/test/'
            }).success(function (data, status) {
                $scope.dataUsed = data.totalInstancesUsed / data.maxTotalInstances * 100;
            }).error(function () {
            });
        }
    });
}]);

当我收到数据时，对于饼图来说为时已晚，因为它已经绘制好了。我想知道是否有办法强制指令再次使用新数据更新模板？

谢谢。

如果因为有其他指令需要重新渲染而需要重新编译模板，则可以在指令中添加以下内容：

controller: function($scope,$element){
    $scope.$watch( 'dataUsed', function( newVal, oldVal ){
        $compile($element.contents())($scope);
    });
}

如果指令的作用域与 MyCtrl 相同，则此方法有效

您需要监视指令的控制器。

$scope.$watch('dataUsed', function(oldValue, newValue) {
    console.log(oldValue, newValue)
}, true)
相关文章：