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

私が見る1つの問題はここにあります：

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

残念ながら、このメソッドのドキュメントはそれほど明確ではありませんが$watch、watchExpression への最初の引数は、Angular 式の文字列または関数である必要があります。したがって、あなたの場合、次のように変更する必要があると思います。

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

それでもうまくいかない場合は、jsfiddle または jsbin.com に例を投稿してください。

于 2013-05-12T09:56:32.030 に答える