Question

我确实有一个指令，一旦文档准备就绪，我正试图应用一个bootstrap折叠函数。

为此，我必须浏览集合的每个对象。

我的指令看起来像这样：

'use strict';

angular.module('app').directive("adScheduleTimeline",function($document) {
    return {
        restrict: 'E',
        scope:{
            ngModel: '='
        },
        templateUrl: '/partials/schedule/ad-schedule-timeline',
        link: function (scope, el, attrs) {
            scope.panelBaseId = attrs.collapsePanelBodyId;
            scope.panelId = attrs.collapsePanelId;

            $document.ready(function(){
                console.log(scope.ngModel)
                angular.forEach(scope.ngModel, function(value, key){
                    if (value.collapsed)
                    {
                        $("#" + scope.panelBaseId + "-" + key).collapse('show');
                    }
                });
            });
        }
    };
});

加载页面后，scope.ngModel未定义，因此collapse功能无效。有没有更好的方法在页面加载上实现类似的功能。

有关信息，折叠功能来自Bootstrap2.x.x.我没有使用angular-ui-bootstrap。

Answer 1

您可以使用scope.$watch()等待填充scope.ngModel的值。

link: function (scope, el, attrs) {
    scope.panelBaseId = attrs.collapsePanelBodyId;
    scope.panelId = attrs.collapsePanelId;

    scope.$watch('ngModel', function (model) {
        if (!model) { return; }

        angular.forEach(model, function(value, key) {
            if (value.collapsed) {
                $("#" + scope.panelBaseId + "-" + key).collapse('show');
            }
        });
    });
}

如果您只想这样做一次，即稍后更改collapse()时无需再次拨打scope.ngModel。你可以这样看着它：

link: function (scope, el, attrs) {
    scope.panelBaseId = attrs.collapsePanelBodyId;
    scope.panelId = attrs.collapsePanelId;

    var unwatch = scope.$watch('ngModel', function (model) {
        if (!model) { return; }

        unwatch();

        angular.forEach(model, function(value, key) {
            if (value.collapsed) {
                $("#" + scope.panelBaseId + "-" + key).collapse('show');
            }
        });
    });
}

顺便说一下，$document.ready()在这里没用，角度会在开始引导之前等待文档准备就绪。

希望这有帮助。

Answer 2

未经测试......

'use strict';

angular.module('app').directive("adScheduleTimeline",function($document) {
    return {
        restrict: 'E',
        require: '?ngModel',
        templateUrl: '/partials/schedule/ad-schedule-timeline',
        link: function (scope, el, attrs, ctrl) {
            scope.panelBaseId = attrs.collapsePanelBodyId;
            scope.panelId = attrs.collapsePanelId;

            if(ctrl.$modelValue)
            {
                angular.forEach(ctrl.$modelValue, function(value, key){
                    if (value.collapsed)
                    {
                            $("#" + scope.panelBaseId + "-" + key).collapse('show');
                    }
                });
            }
        }
    };
})

Answer 3

尝试挂钩$viewContentLoaded事件：

link: function (scope, el, attrs) {
    ...

    scope.$on('$viewContentLoaded', function() {
        console.log(scope.ngModel);
        angular.forEach(scope.ngModel, function(value, key) {
            if (value.collapsed) {
                $("#" + scope.panelBaseId + "-" + key).collapse('show');
            }
        });
    };
}

$ document.ready和ng-model

3 个答案: