0

我今天第一次玩指令，并试图构建一个可重用的进度条指令（基于 Bootstrap 3.0），我可以根据值动态填充或清空。指令定义如下：

directive('progressBar', function () {
    var success = 'progress-bar progress-bar-success';
    var warning = 'progress-bar progress-bar-warning';
    var danger = 'progress-bar progress-bar-danger';

    var setCssStyling = function (width) {
        if (width >= 50) {
            return success;
        } else if (width >= 20) {
            return warning;
        } else {
            return danger;
        }
    }

    var formatWidth = function (width) {
        return 'width: ' + width + '%';
    }

    return {
        restrict: 'E',
        scope: {},
        template: '<div class="progress progress-striped active">' +
            '<div ng-class="cssStyle" role="progressbar" style="{{ width }}"></div>' +
            '</div>',
        link: function (scope, element, attrs) {
            if (attrs.width) {
                scope.width = formatWidth(attrs.width);
            } else {
                scope.width = formatWidth(0);
            }
            scope.$watch(attrs.width, function (newVal) {
                scope.width = formatWidth(newVal);
                scope.cssStyle = setCssStyling(newVal);
            });
        }
    }
});

考虑到这些测试用法，这完全按计划工作：

<progress-bar width="100"></progress-bar>
<progress-bar width="45"></progress-bar>
<progress-bar width="15"></progress-bar>

我希望做的是能够动态地将宽度属性绑定到我的控制器中的一个变化值，这样进度条的宽度和样式就会移动。我尝试绑定到控制器中每秒更改的值：

<progress-bar width="{{ today.seconds }}"></progress-bar>

但是，当我检查该进度条的范围时，宽度始终设置为width: undefined%. 有没有更好的方法来完成动态更新这样的内容，或者我在范围或一些愚蠢的事情上遗漏了什么？

4

2 回答 2

1

您正在使用scope.$watchon attrs.width，这意味着它不应该是插值。所以你应该简单地做<progress-bar width="today.seconds"></progress-bar>。

如果您希望能够使用插值，则可以使用scope.$observe，并且还需要解析宽度（因为插值将返回一个字符串）。

更新：由于您已经设置了一个隔离范围 ( scope: {})，您需要width在您的范围哈希对象中进行绑定。

return {
    restrict: 'E',
    scope: { width: '='},
    template: '<div class="progress progress-striped active">' +
        '<div ng-class="cssStyle" role="progressbar" style="{{ cssWidth }}"></div>' +
        '</div>',
    link: function (scope, element, attrs) {
        scope.cssWidth = '';
        scope.$watch('width', function (newVal) {
            scope.cssWidth = formatWidth(newVal);
            scope.cssStyle = setCssStyling(newVal);
        });
    }
}

当然，如果在您的上下文中有意义，您也可以放弃隔离范围。您也可以将cssWidth所有内容放在一起，只需在style属性中进行格式化。

http://plnkr.co/edit/Zx1fgHYyXuxByHH6YorP

于 2013-10-25T00:37:28.010 回答
1

在您的指令中，您需要使用

scope: { width: '=' }

=这种参数表示 angular 在指令范围内创建双向参数，因此，如果您在指令中更改它的值，您的控制器将受到影响，如果您在控制器中更改此值，您的指令将被反映

于 2013-10-25T01:52:27.447 回答