AngularJS中的指令

Question

嗨，我正在尝试学习AngularJS指令，我真的很接近，但是我想通过清除和解耦指令代码来扩展我的学习范围。

指示：

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: '@'
    },
    templateUrl: 'app/partials/weatherTemplate.html',
    controller: ['$scope', '$http', function($scope, $http) {
  $scope.getTemp = function(city) {}
}],
    link: function (scope, iElement, iAttrs) {
        scope.getTemp(iAttrs.ngCity);
        scope.$watch('weather', function (newVal) {
            if (newVal) {
                var highs = [];

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

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

}）;

如您所见，我不是在尝试编写内联模板，而是使用templateUrl。 现在问题出在控制器上，当我尝试使用.js控制器而不是内联编写控制器代码时，我收到错误消息。 我该如何实现。

我试过了：

我试图通过

controller: '@', 
name: 'ctrl'  

我将'ctrl'传递为：

<div ng-sparkline ng-city="San Francisco" ctrl="weatherController"></div>

它给我找不到控制器。 我的项目结构如下所示。

• 我究竟做错了什么？
• 有更好/正确的方法吗？

请提出建议。

注意：我正在从“ http://www.ng-newsletter.com/posts/directives.html ”学习此练习

Answer 1

为什么不只在您的元素上指定ng-controller ？ 如果WeatherController在其他地方定义，则不会影响您的指令定义，只需将控制器放在那儿即可。

<div ng-sparkline ng-city="San Francisco" ng-controller="WeatherController"></div>

如果您确实在某个地方定义了控制器，例如

app.controller('WeatherController', ['$scope', '$http', function ($scope, $http) {
    $scope.getTemp = // …
}]);

^{（顺便说一句，如果您注意到了，AngularJS约定将以UpperCase方式命名控制器。）}