Question

尝试运行此article

中说明的示例

我的HTML

    <!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>Form</title>
    <link rel="stylesheet" href="css/app.css">
    <!--<link rel="stylesheet" href="css/bootstrap.css">-->
    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="lib/angular/angular.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <script src="js/dir.js"></script>
    <script>

    </script>
</head>
<body>

    {{2+2}}

    <!-- Invoke the directive -->
    <div ng-sparkline ng-city="San Francisco"></div>
    {{weather}}

<script src="js/bootstrap.min.js"></script>

</body>
</html>

来自文章末尾的js代码：

// Code goes here
var app = angular.module('myApp', []);

app.directive('ngSparkline', function() {
    var url = "http://api.openweathermap.org/data/2.5/forecast/daily?mode=json&units=imperial&cnt=14&callback=JSON_CALLBACK&q=";
    return {
        restrict: 'A',
        require: '^ngCity',
        transclude: true,
        scope: {
            ngCity: '@'
        },
        template: '<div class="sparkline"><div ng-transclude></div><div class="graph"></div></div>',
        controller: ['$scope', '$http', function($scope, $http) {
            $scope.getTemp = function(city) {
                $http({
                    method: 'JSONP',
                    url: url + city
                }).success(function(data) {
                        var weather = [];
                        angular.forEach(data.list, function(value){
                            weather.push(value);
                        });
                        $scope.weather = weather;
                    });
            }
        }],
        link: function(scope, iElement, iAttrs, ctrl) {
            scope.getTemp(iAttrs.ngCity);
            scope.$watch('weather', function(newVal) {
                // the `$watch` function will fire even if the
                // weather property is undefined, so we'll
                // check for it
                if (newVal) {
                    var highs = [];

                    angular.forEach(scope.weather, function(value){
                        highs.push(value.temp.max);
                    });

                    chartGraph(iElement, highs, iAttrs);
                }
            });
        }
    }
});

var chartGraph = function(element, data, opts) {
    var width = opts.width || 200,
        height = opts.height || 80,
        padding = opts.padding || 30;

    // chart
    var svg     = d3.select(element[0])
        .append('svg:svg')
        .attr('width', width)
        .attr('height', height)
        .attr('class', 'sparkline')
        .append('g')
        .attr('transform', 'translate('+padding+', '+padding+')');

    svg.selectAll('*').remove();

    var maxY    = d3.max(data),
        x       = d3.scale.linear()
            .domain([0, data.length])
            .range([0, width]),
        y       = d3.scale.linear()
            .domain([0, maxY])
            .range([height, 0]),
        yAxis = d3.svg.axis().scale(y)
            .orient('left')
            .ticks(5);

    svg.append('g')
        .attr('class', 'axis')
        .call(yAxis);

    var line    = d3.svg.line()
            .interpolate('linear')
            .x(function(d,i){return x(i);})
            .y(function(d,i){return y(d);}),
        path    = svg.append('svg:path')
            .data([data])
            .attr('d', line)
            .attr('fill', 'none')
            .attr('stroke-width', '1');
}

app.directive('ngCity', function() {
    return {
        controller: function($scope) {}
    }
});

据我了解，代码应该替换巫婆'ng-sparkline'指令中的'div'。但它什么都不做（

jsfiddle with my tryings http://jsfiddle.net/dRSR8/

你能帮我找一下我做错的事吗？谢谢！

Answer 1

两件事：

不是将AngularJS“onLoad”包括在内，而是“No Wrap - in head”（或“No wrap-in body”）。您将在“框架和扩展”

下的左侧看到此选项

然后，由于您使用的是D3，请转到外部资源并添加：http://d3js.org/d3.v3.min.js

angularjs，理解这个例子

1 个答案: