使用 HTML 属性通过指令加载 JSON

Question

指令

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>

该指令根据 Html 中定义的 table-name= 属性创建一个表，其模板更改。 我现在遇到的问题是在使用$http 服务获取 JSON 文件的指令中定义函数的位置。选择哪个 JSON 文件取决于 Html 中的属性 table-data=。

指令应该做什么的例子

获取这个 html -> <site-table table-name="goals" table-data="goals"></site-table>

然后根据位于partials/goals.html 的模板创建一个表，并从app_data/goals.json 加载一个JSON 文件。

我应该创建一个分配给这个特定指令的控制器吗？

请指点我正确的方向，让我再次尝试找出答案，而不是给我答案，我将通过这种方式了解更多关于指令和角度的信息。

谢谢你:)

编辑 ->

解决方案

在社区的广泛帮助下，问题得到了解决，如果您需要解决相同的问题，这里是一般指南。

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。最终设置为我们的 templateURL 的是 Hexdra/partials/goals-table.html

我们给我们的指令一个已经在应用程序中定义的控制器。 controller: TableController.

我们为该控制器分配一个新名称。 controllerAs: TblCtrl.

我们现在使用链接并向它传递一个函数，该函数包含范围、元素、属性和包含在指令中的控制器。 这允许我们调用控制器 TableController 中的服务 JSONGet。 所以controller.getJSON(attr.tableData) 的意思是，找到控制器（在该指令中定义为TableController）找到函数.getJSON 并将属性tableData 在HTML 中定义的内容传递给它。

现在我们进入控制器

该方法.getJSON 在这里，实际上是一个函数，它传入一个参数文件名，我们的指令是attr.tableData。该方法实际上是dataGet 服务的一部分，该服务将fileName 参数传递给getJSON 函数，然后使用内置的$http 服务从角度进行AJAX 调用以获取填充所需的数据桌子。

最终结果。

我们生成一个表，该表已经从任何表名相等的表中加载了自己的模板。我们还能够使用 JSON 文件填充表，该文件从动态使用 table-data 属性的服务中提取其位置。

您可以view the plunkr here，感谢 Juarez 先生

Answer 1

您应该创建一个控制器，它将操作您将在视图中显示的所有数据，在您的指令中您应该只拥有 DOM 操作。

创建控制器后，您应该创建一个服务，该服务将具有执行 $http 调用的函数。

在控制器中，您应该有一个属性，该属性将从指令的 html 中引用，该属性将是您要显示的数据，如果这是您想要的。