Использование атрибута HTML для загрузки JSON через директиву

Директива

function CreateTable($http) {
    return {
        restrict: "E",
        scope: true,
        templateUrl: function (element, attr) {
                return 'Hexdra/partials/' + attr.tableName + '-table.html';
            },
        link: function(scope, iElement, iAttrs, controller) {
                $http.get('Hexdra/app/app_data/' + iAttrs.tableData + '.json')
                     .success(function (data) {
                         var vm = scope;
                         vm.table = data;
                     });
                return vm.table;
            }
        };
    };

Html

<site-table table-name="goals" table-data="goals"class="span6"></site-table>

Директива создает шаблон таблицы whos, основанный на том, что атрибут table-name= определен в Html. Теперь у меня возникают проблемы с тем, как определить функцию в директиве, которая использует службу $http для получения файла JSON. Какой JSON файл выбирается в table-data= атрибутов table-data= в Html.

Пример того, что должна делать директива

Возьмите этот html → <site-table table-name="goals" table-data="goals"></site-table>

А затем создайте таблицу на основе шаблона, расположенного в partials/goals.html и загрузите файл JSON из app_data/goals.json.

Должен ли я создать контроллер, назначенный этой конкретной директиве?

Пожалуйста, укажите мне в правильном направлении и позвольте мне попытаться понять это снова, вместо того, чтобы дать мне ответ, я узнаю больше о директивах и угловых.

Спасибо :)

EDIT ->

Решение

При обширной помощи сообщества проблема была решена, и вот общее руководство, если вам нужно решить ту же проблему.

Html

<site-table table-name="goals" table-data="goals"class="span6"></site-table>

Новый Angular.js

Настроить

angular
    .module('table', [])
    .controller('TableController', TableController)
    .directive('siteTable', CreateTable)
    .factory('dataGet', JSONGet)

TableController.$inject = ['dataGet'];
JSONGet.$inject = ['$http'];

Обслуживание

function JSONGet($http) {
    return {
       getJSON: function (fileName) {
         return $http.get(fileName +'json').then(function (result) {
                return result.data;
            });
       }
    };
}

Примечание. Существует несколько способов определения службы, эта служба была определена с использованием фабрики.

Контроллер

function TableController(dataGet) {
    var vm = this;
    vm.table = [];
    this.getJSON = function (fileName) {
        dataGet.getJSON(fileName).then(function (data) {
            vm.table = data;
        });
    }
}

Директива

function CreateTable() {
    return {
        restrict: "E",
        scope: true,
        templateUrl: function (element, attr) {
            return 'Hexdra/partials/' + attr.tableName + '-table.html';
        },
        controller: 'TableController',
        controllerAs: 'TblCtrl',
        link: function (scope, element, attr, controller) {
            controller.getJSON(attr.tableData);
        }
    };
 }

Нарушение директивы

У нас есть директива о том, что:

Ограничен Элементом, ограничивает: "E".

Имеет свой собственный масштаб, scope: true.

Имеет templateUrl, который будет заполнен данными из нашего вызова AJAX. Тем не менее, это особенная часть этого TemplateUrl. Мы могли бы просто установить его на статический неизменный адрес, partials/myTemplate.html. Вместо этого мы передаем ему функцию с двумя аргументами, элементом и атрибутом (attr), это позволяет нам извлекать из элементов или атрибутов, которые назначены этой директиве в HTML. Его возврат к конкатенированному адресу, attr.tableName был атрибутом, который мы дали нашей директиве table, и в нашем HTML мы имеем tableName=goals. Что заканчивается тем, что мы устанавливаем, поскольку наш Hexdra/partials/goals-table.html - это Hexdra/partials/goals-table.html

Мы даем нашу директиву контроллер, который уже определен в приложении. controller: TableController.

Мы назначаем контроллеру новое имя. controllerAs: TblCtrl.

Теперь мы используем ссылку и передаем ей функцию, содержащую область, элементы, атрибуты и контроллер, которые содержатся в директиве. Это позволяет нам вызвать службу JSONGet, которая находится в контроллере TableController. Таким образом, controller.getJSON(attr.tableData) означает, что контроллер (который определен как TableController в этой директиве) найдет функцию .getJSON и передаст ей то, что атрибут tableData определен как в HTML.

Теперь перейдем к контроллеру

Этот метод .getJSON находится здесь и на самом деле является функцией, которая проходит в одном аргументе fileName, которое из нашей директивы является attr.tableData. Этот метод фактически является частью службы dataGet которая принимает переданный параметр fileName передает его функции getJSON, которая затем использует встроенную службу $http от углового, чтобы сделать вызов AJAX, чтобы получить необходимые данные для заполнения таблицы.

Конечный результат.

Мы создаем таблицу, которая загрузила свой собственный шаблон из любого табличного имени. Мы также можем заполнить таблицу файлом JSON, который извлекает свое местоположение из службы, которая динамически использует атрибут table-data.

Вы можете посмотреть plunkr здесь, любезно предоставленный г-ном Хуаресом