2

我正在尝试在 angularJs 中构建一个简单的指令，该指令通过属性接受一些配置选项，但如果未设置属性，我想为属性设置默认值。

以下是我描述我的范围的方式：

scope :  {
            classes: '@',
            progress: '@'
         }

这些属性以下列方式显示在视图中：

<div class="{{classes}}">
    <div style="width: {{progress}}%;" class="bar"></div>
</div>

在链接功能中，我尝试以这种方式设置默认值：

link: function(scope, el, attrs)
        {
           console.log( scope.classes, scope.progress );
           if (typeof scope.classes === 'undefined')
               scope.classes = 'progress progress-warning';

           if (typeof scope.progress === 'undefined')
               scope.progress = 99;
           console.log( scope.classes, scope.progress );
        }

这是控制台输出：

undefined undefined
progress progress-warning 99

因此，似乎在范围内正确设置了值。但是在实际的 html 输出中，属性没有被呈现。这是生成的 HTML：

<div class="">
    <div class="bar" style="width: %;"></div>
</div>

但是，如果我在从 html 调用属性时内联提供这些属性，例如：

<my-directive data-progress="60" data-classes="progress" />

然后它显示得很好：

<div class="progress" data-progress="60" data-classes="progress">
    <div class="bar" style="width: 60%;"></div>
</div>

我的问题是，当我刚刚调用时<my-directive />，为什么它没有从链接函数中设置进度和类的默认值？（尽管在控制台中显示它确实如此）

4

3 回答 3

4

试试这个：

link: function(scope, element, attrs) {
    scope.classes = attrs.classes || 'progress progress-warning';
    scope.progress = attrs.progress || 99;
}

你可以放弃scope : { classes: '@', progress: '@' }指令的一部分。

我看到您在编写指令时遇到了一些困难。看看我最近实施的这个。也许它会帮助你完成你的。

于 2013-08-10T03:00:44.093 回答
2

试试这个：

if (typeof scope.progress === 'undefined') {
       attrs.$set('progress', 99);
}

并设置：

<div class="bar" style="width: {{progress}}%;"></div>

看到这个Plunker。它将设置99ifdata-progress未声明或 if isdata-progress=""

于 2013-08-10T02:19:52.797 回答
0

将您的范围更改为

scope: {
  ngModel: '@'
}
于 2013-08-10T02:05:41.067 回答