1

我是 angularjs 的新手，正在编写我的第一个指令。我已经完成了一半，但正在努力弄清楚如何将一些变量传递给指令。

我的指令：

app.directive('chart', function () {
    return{
        restrict: 'E',    
        link: function (scope, elem, attrs) {    
            var chart = null;
            var opts = {};
            alert(scope[attrs.chartoptions]);

            var data = scope[attrs.ngModel];

            scope.$watch(attrs.ngModel, function (v) {
                if (!chart) {
                    chart = $.plot(elem, v, opts);
                    elem.show();
                } else {
                    chart.setData(v);
                    chart.setupGrid();
                    chart.draw();
                }
            });
        }
    };
});

我的控制器：

function AdListCtrl($scope, $http, $rootScope, $compile, $routeParams, AlertboxAPI) {
    //grabing ad stats
        $http.get("/ads/stats/").success(function (data) {
            $scope.exports = data.ads;
            if ($scope.exports > 0) {
                $scope.show_export = true;
            } else {
                $scope.show_export = false;
            }

            //loop over the data
            var chart_data = []
            var chart_data_ticks = []
            for (var i = 0; i < data.recent_ads.length; i++) {
                chart_data.push([0, data.recent_ads[i].ads]);
                chart_data_ticks.push(data.recent_ads[i].start);
            }

            //setup the chart

            $scope.data = [{data: chart_data,lines: {show: true, fill: true}}];
            $scope.chart_options = {xaxis: {ticks: [chart_data_ticks]}};


        });
}

我的HTML：

<div class='row-fluid' ng-controller="AdListCtrl">
    <div class='span12' style='height:400px;'>
        <chart ng-model='data' style='width:400px;height:300px;display:none;' chartoptions="chart_options"></chart>
        {[{ chart_options }]}
    </div>
</div>

我可以访问$scope.data指令中的 ，但我似乎无法访问$scope.chart_options数据。它被定义为如果我回显它，它会显示在页面上。

任何想法我做错了什么？

更新： 出于某种原因，使用此指令，如果我将 移动alert(scope[attrs.chartoptions]);到 $watch 内，它首先会警告为“未定义”，然后再次警告为正确的值，否则它始终是未定义的。它可能与我用来绘制图表的 jquery flot 库有关吗？

干杯，本

4

1 回答 1

0

我看到的一个问题是：

scope.$watch(attrs.ngModel, function (v) {

不幸的是，有关此方法的文档不是那么清楚，但是$watchwatchExpression 的第一个参数需要是角度表达式字符串或函数。因此，就您而言，我认为您需要将其更改为：

scope.$watch("attrs.ngModel", function (v) {

如果这不起作用，只需在您的示例中发布 jsfiddle 或 jsbin.com。

于 2013-05-12T09:56:32.030 回答