Директивы в 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 является контроллеры имен в верхнем регистре моды.)}