AngularJS 指令 - 访问模板中的 $rootScope 变量

Question

我在 $rootScope 中定义了一个函数，它有一定的价值。我创建了一个指令来显示那里的价值。我在那里没有得到任何价值。

<last-data-update-message type="info" update-for='stats'></last-data-update-message>

$rootScope.Helpers = {
getLastUpdateStatus: function(type) {
    if (!_.isEmpty(Helpers.lastUpdateDetails)) {
        if (type == 'requests') {
            return Helpers.lastUpdateDetails.last_request_generated;
        } else if (type == "stats") {
            return Helpers.lastUpdateDetails.last_stats_executed || ((new Date()).getTime() - 2 * 60 * 60 * 1000);
        } else if (type == "response") {
            return Helpers.lastUpdateDetails.last_response_recieved;
        } else {
            return Helpers.lastUpdateDetails.last_stats_executed || ((new Date()).getTime() - 2 * 60 * 60 * 1000);
        }

    }
  }
}
mymodule.directive('lastDataUpdateMessage', ["$rootScope", '$compile', function($rootScope, $compile) {

    return {
        restrict: 'AE',
        replace: true,
        template: function(element, attrs) {
            if (element && element[0]) {
                var targetElem = element[0];
                console.log(attrs)
                console.log("type", attrs.type)
                console.log("for", attrs.updateFor);
                console.log(attrs.updateFor);

                return '<div class="alert alert-info fade in margin-0" style="margin-top:10px !important">' +
                    '<i class="fa-fw fa fa-info"></i>' +
                    '<strong>Information!</strong> The below report relies on data that is computed in batch. The computaitons were last updated about <span am-time-ago="$rootScope.Helpers.getLastUpdateStatus(' + attrs.updateFor + ')"></span>.' +
                    '</div>';
            }
        },
        link: function(element) {

        }
    }

如有任何帮助，我们将不胜感激。

Answer 1

您的代码中几乎没有错误。 1) 您无法访问 dom 中的任何 angular 变量。 :) 2) 如果一个函数定义在 $rootScope 或 $scope 上，如果通过插值从 dom 调用，那么在函数参数中你只能传递那些在 $scope 上定义的变量而不是 Attrs，这是第二个错误。 :)

我只是稍微修改了您的代码使其工作。

请根据您的要求修改 return 语句。

希望我能够回答您的问题。 :)

app.directive('lastDataUpdateMessage', ['$rootScope', '$compile', function ($rootScope, $compile) {

    return {
        restrict: 'AE',
        replace: true,
        template: function (element, attrs) {
            if (element && element[0]) {
                return '<div class="alert alert-info fade in margin-0" style="margin-top:10px !important">' +
                    '<i class="fa-fw fa fa-info"></i>' +
                    '<strong>Information!</strong> The below report relies on data that is computed in batch.'+
                    'The computaitons were last updated about <span>{{Helpers.getLastUpdateStatus()}}</span>.' +
                    '</div>';
            }
        },
        link: function (scope, element, attrs) {
            scope.type = attrs.updateFor;
            scope.Helpers = {
                getLastUpdateStatus: function () {
                    if (scope.type == 'requests') {
                        return 'requests';
                    } else if (scope.type == "stats") {
                        return "stats Test";
                    } else if (scope.type == "response") {
                        return "response";
                    } else {
                        return "OOPS! Type is empty";
                    }
                }
            }
        }
    }

}])

AngularJS 指令 - 访问模板中的 $rootScope 变量

AngularJS Directive - Access $rootScope variable in template

angularjs

angularjs-directive