使用HTML属性通过指令

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文件。在Html中的属性table-data=上选择了哪个JSON文件。

该指令应该做什么的一个例子

拿这个html - ＆gt; <site-table table-name="goals" table-data="goals"></site-table>

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

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

请指出我正确的方向，让我试着再次弄明白，而不是给我答案，我会更多地了解指令和角度。

谢谢：）

编辑 - ＆gt;

解决方案

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

Html

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

New 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”。

有自己的范围，范围：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。

我们现在使用link并传递一个包含范围，元素，属性和指令中包含的控制器的函数。 这允许我们调用控制器TableController中的服务JSONGet。 所以controller.getJSON(attr.tableData)意味着，找到控制器（在此指令中定义为TableController）找到函数.getJSON并将其传递给HTML中定义的属性tableData。

现在我们转到控制器

该方法.getJSON在这里，实际上是一个传递一个arguement fileName的函数，该命令来自我们的指令attr.tableData。该方法实际上是dataGet服务的一部分，它将传递给fileName参数传递给getJSON函数，该函数然后使用来自angular的内置$http服务进行AJAX调用获取填充表所需的数据。

最终结果。

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

你可view the plunkr here，由Juarez先生提供

Answer 1

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

创建控制器后，您应创建服务，该服务将具有执行$ http调用的功能。

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