Question

所以我有一个可重复使用的组件，用于制作一些带角度的通用数据表。 https://github.com/lostrouter/angular.datatables。然而，我发现我的自我不断重复我的代码为一些查找实体创建crud视图。所以我想制作一个新的角度指令，我可以在几乎所有这些查找实体上使用。通过查找我的意思是一个简单的键值对。所以我试图从我的通用解决方案中提取我需要的这个指令，希望有一个即插即用的解决方案。事实证明并非如此。我拉着我的头发想弄清楚为什么一个基本上做同样事情的解决方案正在起作用，而这个新想法却没有。在模板中，如果我调用{{aaData}}，我可以看到它被传入，并且对象中有数据。

控制器

angular.element(document).ready(function () {
    "use strict";

    var deptApp = angular.module('deptApp', ['possumLookupCrudTable']);

    function DepartmentCtrl(scope, http) {


        scope.apiUrl = 'api/Departments';
        scope.entityName = 'Department';
        scope.aaData = [];

        http.get(config.root + scope.apiUrl).success(function (result) {
            scope.aaData = result;
        });
    };

    DepartmentCtrl.$inject = ['$scope', '$http'];

    deptApp.controller('DepartmentCtrl', DepartmentCtrl);

    angular.bootstrap(document, ['deptApp']);
});

指令

var lookupCrudDir = angular.module('possumLookupCrudTable', ['resettableForm']);

function possumLookupCrudTable(http) {
    "use strict";

    function controller(scope, $http, $compile) {

        // initilize object used in add/edit modal
        scope.eCurrent = true;

        // data table column definitions
        var columnDefs = [
        { "mData": "Id", "sTitle": "Id", "aTargets": [0], "bVisible": false },
        { "mData": "Name", "sTitle": "Department", "aTargets": [1] },
        { "mData": "Active", "sTitle": "Active", "sWidth": "6em", "aTargets": [2] },
        { "mDataProp": "Id", "aTargets": [3], "sWidth": "5em", "bSortable": false, "mRender": function (data, type, full) {
            return '<a href="" ng-click="editR(' + data + ')"><img src="' + config.root + 'Content/images/icons/file_edit_16x16.png" alt="edit record" title="edit record" /></a>&nbsp;' +
                    '<a href="" ng-click="removeR(' + data + ')"><img src="' + config.root + 'Content/images/icons/file_delete_16x16.png" alt="delete record" title="delete record" /></a>';
        } 
        }];


        // datatable options
        var options = {
            "bStateSave": true,
            "iCookieDuration": 2419200, /* 1 month */
            "bJQueryUI": false,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bDestroy": true,
            "bProcessing": true,
            "aoColumnDefs": columnDefs,
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $compile(nRow)(scope);
            }
        };

        // declare the datatable
        scope.dataTable = angular.element('#lookupTable').dataTable(options);    
    };

    function Link(scope) {

         //watch for any changes to our data, rebuild the DataTable
                scope.$watch(scope.aaData, function (value) {
                    var val = value || null;
                    if (val) {
                        scope.dataTable.fnClearTable();
                        scope.dataTable.fnAddData(scope.aaData);
                    }
                }, true);


// there is code that goes here for handling click events and put/post/delete stuff that is not affecting the solution

        var editTitle = 'Edit ' + scope.entityName;
        var addTitle = 'Add ' + scope.entityName;
    };

    // directive definition object
    var ddo = {
        restrict: 'A',
        templateUrl: config.root + 'AngularTemplate/LookupCrudTable',
        link: Link,
        controller: ['$scope', '$http', '$compile', controller],
        scope: {
            entityName: '=',
            apiUrl: '=',
            aaData: '='
        }
    };

    return ddo;
};

possumLookupCrudTable.$inject = ['$http'];
lookupCrudDir.directive('possumLookupCrudTable', possumLookupCrudTable);

视图

<div ng-controller="DepartmentCtrl">
    <div possum-lookup-crud-table entity-name="entityName" api-url="apiUrl" aa-data="aaData">
    </div>
</div>

Answer 1

发现了这个问题。我应该像通用指令一样观看attrs.aaData。我不完全理解为什么观看attrs.aaData有效，而scope.aaData没有。

    // watch for any changes to our data, rebuild the DataTable
    scope.$watch(attrs.aaData, function (value) {
        var val = value || null;
        if (val) {
            scope.dataTable.fnClearTable();
            scope.dataTable.fnAddData(scope.aaData);
        }
    }, true);

使用angular和datatables，一个实现显示数据而另一个实现不显示数据

1 个答案: