Question

我是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库相关吗？

干杯，本

Answer 1

我看到的一个问题是：

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

遗憾的是docs on this method并不是那么清楚，但$watch的第一个参数，即watchExpression，需要是一个角度表达式 string 或一个函数。因此，在您的情况下，我认为您需要将其更改为：

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

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

AngularJS将变量传递给指令

1 个答案: