javascript - Get Current Controller Name in AngularJS - Stack Overflow

admin管理员组

文章数量:1318335

I'm trying to write a directive that will generate a grid. The following code works but I have to specify the controller name 'DemoCtrl'. Is it possible to retrieve the current controller name from within the directive so I can pass it through to the buildColumn/buildRows functions?

angular.module('app').controller('DemoCtrl', function ($scope) {
    $scope.controller = "DemoCtrl";
    $scope.coldata = [
        {name: 'Account'},
        {name: 'Name'}
    ];
    $scope.rowdata = [
        {
            "account": "ABC",
            "name": "Jim",
        },
        {
            "account": "DEF",
            "name": "Joe",
        },
        {
            "account": "GHI",
            "name": "Fred",
        }
    ];
});

angular.module('foxyponents.grid', [])

        .controller('GridController', ['$scope', '$attrs', function ($scope, $attrs) {
            }])

        .directive('grid', function ($pile) {
            return {
                restrict: 'EA',
                controller: 'GridController',
                require: "^ngController",
                scope: {
                    data: "=",
                    columns: "=",
                    controller: "="
                },
                link: function (scope, element, attrs, ctrl) {
                    scope.$watch('data', function () {
                        var el = $pile(buildGrid(scope.controller))(scope);
                        element.replaceWith(el);
                        element = el;
                    });

                }
            };
        })

function buildGrid(controller) {
    var html = "<table>";

    html += "<thead>";
    html += buildColumn(controller);
    html += "</thead>";

    html += "<tbody>";
    html += buildRows(controller);
    html +="</body>";

    html += "</table>";

    return html;
}
function buildColumn(controller) {
    try {
        var html = "";
        var dom_el = document.querySelector('[ng-controller="' + controller + '"]');
        var ng_el = angular.element(dom_el);
        var ng_el_scope = ng_el.scope();
        var colname = ng_el_scope.coldata;

        html += "<tr>";

        for (i = 0; i < colname.length; i++) {
            html += "<th>";
            html += colname[i]["name"];
            html += "</th>";
        }

        html += "</tr>";

        return html;
    } catch (err) {
        return "#error" + err;
    }
}

function buildRows(controller) {
    try {
        var html = "";
        var dom_el = document.querySelector('[ng-controller="' + controller + '"]');
        var ng_el = angular.element(dom_el);
        var ng_el_scope = ng_el.scope();
        var colname = ng_el_scope.coldata;
        var rows = ng_el_scope.rowdata;

        for (j = 0; j < rows.length; j++) {
            html += "<tr>";

            for (data in rows[j]) {
                html += "<td>";
                html += rows[j][data];
                html += "</td>";
            }

            html += "</tr>";
        }

        return html;
    } catch (err) {
        return "#error" + err;
    }
}

I'm trying to write a directive that will generate a grid. The following code works but I have to specify the controller name 'DemoCtrl'. Is it possible to retrieve the current controller name from within the directive so I can pass it through to the buildColumn/buildRows functions?

angular.module('app').controller('DemoCtrl', function ($scope) {
    $scope.controller = "DemoCtrl";
    $scope.coldata = [
        {name: 'Account'},
        {name: 'Name'}
    ];
    $scope.rowdata = [
        {
            "account": "ABC",
            "name": "Jim",
        },
        {
            "account": "DEF",
            "name": "Joe",
        },
        {
            "account": "GHI",
            "name": "Fred",
        }
    ];
});

angular.module('foxy.ponents.grid', [])

        .controller('GridController', ['$scope', '$attrs', function ($scope, $attrs) {
            }])

        .directive('grid', function ($pile) {
            return {
                restrict: 'EA',
                controller: 'GridController',
                require: "^ngController",
                scope: {
                    data: "=",
                    columns: "=",
                    controller: "="
                },
                link: function (scope, element, attrs, ctrl) {
                    scope.$watch('data', function () {
                        var el = $pile(buildGrid(scope.controller))(scope);
                        element.replaceWith(el);
                        element = el;
                    });

                }
            };
        })

function buildGrid(controller) {
    var html = "<table>";

    html += "<thead>";
    html += buildColumn(controller);
    html += "</thead>";

    html += "<tbody>";
    html += buildRows(controller);
    html +="</body>";

    html += "</table>";

    return html;
}
function buildColumn(controller) {
    try {
        var html = "";
        var dom_el = document.querySelector('[ng-controller="' + controller + '"]');
        var ng_el = angular.element(dom_el);
        var ng_el_scope = ng_el.scope();
        var colname = ng_el_scope.coldata;

        html += "<tr>";

        for (i = 0; i < colname.length; i++) {
            html += "<th>";
            html += colname[i]["name"];
            html += "</th>";
        }

        html += "</tr>";

        return html;
    } catch (err) {
        return "#error" + err;
    }
}

function buildRows(controller) {
    try {
        var html = "";
        var dom_el = document.querySelector('[ng-controller="' + controller + '"]');
        var ng_el = angular.element(dom_el);
        var ng_el_scope = ng_el.scope();
        var colname = ng_el_scope.coldata;
        var rows = ng_el_scope.rowdata;

        for (j = 0; j < rows.length; j++) {
            html += "<tr>";

            for (data in rows[j]) {
                html += "<td>";
                html += rows[j][data];
                html += "</td>";
            }

            html += "</tr>";
        }

        return html;
    } catch (err) {
        return "#error" + err;
    }
}

• javascript
• angularjs
• angularjs-directive
• angularjs-controller

Share Improve this question Follow edited Jun 21, 2015 at 18:47 Foxy asked Jun 21, 2015 at 7:18 FoxyFoxy 14111 gold badge11 silver badge77 bronze badges 1

• 1 Totally unrelated to your problem, but you should checkout the += operator. – m90 Commented Jun 21, 2015 at 7:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You could use your route service to get the controller name

{{$route.current.scope.name}}

I've updated my code with my solution, I decided to create a new scope variable with the controller name which gets passed through to the buildGrid function. Not ideal, but it works!

本文标签： javascriptGet Current Controller Name in AngularJSStack Overflow