javascript - 使用 Angular 和数据表，一种实现显示数据，而另一种则不显示

Question

所以我有一个可重用的组件来制作一些带 Angular 通用数据表。 https://github.com/lostrouter/angular.datatables 。然而，我发现自己不断重复我的代码，为某些查找实体创建 CRUD View 。所以我想制作一个新的 Angular Directive(指令)，我可以在几乎所有这些查找实体上使用它。我所说的查找是指一个简单的键值对。所以我尝试从该指令的通用解决方案中提取我需要的内容，希望得到一个即插即用的解决方案。事实证明并非如此。我绞尽脑汁地想弄清楚为什么一个基本上做同样事情的解决方案有效，而这个新想法却无效。在模板中，如果我调用 {{aaData}} 我可以看到它正在传入，并且对象中有数据。

Controller

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);