将项从控制器中的值转换为指令

Converting an item from a value within a controller to a directive

本文关键字：转换 指令 控制器      更新时间：2023-09-26

我不确定我是否这样做是正确的，但我正试图将某些东西转换为控制器中的指令，因为我想多次使用它，只是改变几个值，所以不是制作许多巨大的对象文字，我将只有一个，只是改变传入的值。我试图绑定chartConfig，但它似乎不工作。我做错了吗?

这是我的指令:

app.directive('percentageSquare', function(){
    return {
        restrict: 'E',
        scope: {
            bgClass: '@',
            percentage: '@',
            chartConfig: '='
        },
        link: function(scope){
            var fontSize = 80;
            var percentage = scope.percentage || 0;
            scope.chartConfig = {
                options: {
                    chart: {
                        // Chart settings here
                    }
                }
            };
        },
        templateUrl: '/templates/dashboard/charts/PercentageChart.html'
    };
});

这是指令正在使用的模板( percentagecchart .html):

<div class="drop-shadow">
    <div class="row">
        <div class="col-sm-12">
            <highchart config="chartConfig" class="{{bgClass||''}}" ng-show="true"></highchart>
        </div>
    </div>
</div>

下面是我调用指令的方式:

<percentage-square bg-class="bg-orange" percentage="23"></percentage-square>

现在我的chartConfig不再绑定到指令，就像它以前在控制器时一样。有什么办法可以解决这个问题?

<标题>编辑

我已经得到了一点进一步，这似乎工作:

scope.$watch(scope.chartConfig, function(){
    scope.chartConfig = {
       // Chart Settings
    };
});

但是它似乎加载了两次图表，因为我得到了两个动画

看来我想做的是看chartConfig。为了使其正常工作，还必须将其包装在字符串中。使用scope.chartConfig加载图表两次，而'chartConfig'加载图表一次并且正确。

scope.$watch('chartConfig', function(){
    scope.chartConfig = {
       // Chart Settings
    };
});
相关文章：