Javascript 使用角度表和数据表，一个实现显示数据，而另一个不显示数据

因此，我有一个可重用的组件，用于使用angular创建一些通用数据表。然而，我发现自己不断重复代码，为一些查找实体创建crud视图。所以我想做一个新的angular指令，我可以在几乎所有这些查找实体上使用它。我所说的查找是指一个简单的键值对。因此，我试图从我的通用解决方案中提取出我需要的内容，希望得到一个即插即用的解决方案。结果不是。我正在绞尽脑汁试图弄明白为什么一个基本上做相同事情的解决方案是有效的，而这个新想法是无效的。在模板中，如果我调用{{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);

var lookupCrudDir=angular.module（'possumlokupcrudtable'，['resettableForm']）；
函数possumLookupCrudTable（http）{
“严格使用”；
函数控制器（作用域，$http，$compile）{
//初始化添加/编辑模式中使用的对象
scope.eCurrent=true；
//数据表列定义
var columnDefs=[
{“mData”：“Id”，“sTitle”：“Id”，“ataargets”：[0]，“bVisible”：false}，
{“mData”：“Name”，“sTitle”：“Department”，“atatargets”：[1]}，
{“mData”：“Active”，“sTitle”：“Active”，“sWidth”：“6em”，“aTargets”：[2]}，
{“mDataProp”：“Id”，“ataargets”：[3]，“sWidth”：“5em”，“bSortable”：false，“mRender”：函数（数据、类型、完整）{
返回“”+
'';
} 
}];
//数据表选项
变量选项={
“bStateSave”：正确，
“iCookieDuration”：2419200，/*1个月*/
“bJQueryUI”：错，
“bPaginate”：对，
“bLengthChange”：正确，
“bFilter”：没错，
“bSort”：正确，
“宾福”：没错，
是的，
“bProcessing”：正确，
“aoColumnDefs”：columnDefs，
“fnRowCallback”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
$compile（nRow）（范围）；
}
};
//声明数据表
scope.dataTable=angular.element（“#lookupTable”）.dataTable（选项）；
};
功能链接（范围）{
//观察数据的任何更改，重建DataTable
scope.$watch（scope.aaData，函数（值）{
var val=值| | null；
if（val）{
scope.dataTable.fnClearTable（）；
scope.dataTable.fnAddData（scope.aaData）；
}
}，对）；
//这里有一些代码用于处理点击事件和放置/张贴/删除不会影响解决方案的内容
var editTitle='Edit'+scope.entityName；
var addTitle='Add'+scope.entityName；
};
//指令定义对象
var ddo={
限制：“A”，
templateUrl:config.root+'AngularTemplate/LookupCrudTable'，
链接：链接，
控制器：['$scope'，'$http'，'$compile'，controller]，
范围：{
entityName:“=”，
APIRL:“=”，
aa数据：'='
}
};
返回ddo；
};
possumLookupCrudTable.$inject=['$http']；
lookupCrudDir.指令（'possumLookupCrudTable'，possumLookupCrudTable）；

看法

---

找到了问题。我应该像一般指令一样关注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);

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