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中的任何角度变量。 :) 2）如果在$ rootScope或$ scope上定义的函数，如果通过插值从dom调用，那么在函数参数中你只能传递那些在$ scope而不是Attrs上定义的变量，这是第二个错误。：）

我刚刚修改了你的代码以使其正常工作。

请根据您的要求修改退货声明。

希望，我能够回答你的问题。：）

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变量

1 个答案: