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

Question

假设我有一个指令，其中模板包含一些数据，提供另一个 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中使用，它依赖数据使用的值来绘制饼图。

我有另一个接收数据的 Controller :

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 () {
            });
        }
    });
}]);

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

谢谢。

Answer 1

如果您需要重新编译模板，因为还有其他指令需要重新渲染，您可以将其添加到指令中:

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

    });
}

如果指令的范围与 MyCtrl 相同，则这是有效的