如何在角度指令中包装 jquery 插件 - jtable.js？答案

【问题标题】：how to wrap a jquery Plugin - jtable.js in a angular directive?如何在角度指令中包装 jquery 插件 - jtable.js？
【发布时间】：2016-12-08 08:36:03
【问题描述】：

我正在尝试将 jtable 包装在 angularjs 指令中。但我无法运行它。它在 jquery 中工作正常，有人可以帮我吗？

我的html代码是：

 <jtable></jtable>

我的 Angular 代码是：

  myApp.directive("jtable",function(){
    return
    {
        link: [function(scope, el, attrs) {
            el.jtable({
                title: 'Table of people',
                actions: {
                    listAction: '/GettingStarted/PersonList',
                    createAction: '/GettingStarted/CreatePerson',
                    updateAction: '/GettingStarted/UpdatePerson',
                    deleteAction: '/GettingStarted/DeletePerson'
                },
                fields: {
                    PersonId: {
                        key: true,
                        list: false
                    },
                    Name: {
                        title: 'Author Name',
                        width: '40%'
                    },
                    Age: {
                        title: 'Age',
                        width: '20%'
                    },
                    RecordDate: {
                        title: 'Record date',
                        width: '30%',
                        type: 'date',
                        create: false,
                        edit: false
                    }
                }
            });
            (angular.element(el)).pluginActivationFunction(scope.$eval(attrs.jtable));
        }]
    };
});

【问题讨论】：

您阅读过文档吗？

标签： jquery angularjs angularjs-directive jquery-plugins

【解决方案1】：

您必须在指令中使用限制，例如：

限制：'ACEM'，链接：函数（范围、元素、属性）

你必须像任何一个属性、元素、类和评论或模型一样看待

【讨论】：

【解决方案2】：

您必须在指令中使用限制，例如：

  restrict: 'ACEM', 
  link: function (scope, element, attrs)

你必须像任何一个属性、元素、类和评论或模型一样添加视图：

 <div id="jtableConfiguration" style="margin-top:40px;" jtable-Configuration> </div>

这里是“jtableConfiguration”指令名称。

【讨论】：