Question

我正在尝试在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 />时，为什么它没有从链接函数中设置进度和类的默认值？（尽管在控制台中显示它确实如此）

Answer 1

试试这个：

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

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

我发现你在编写指令时遇到了一些困难。查看我最近实施的this one。也许它会帮助你包装你的。

Answer 2

试试这个：

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

并设置：

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

见Plunker。如果未声明99或data-progress

，则会设置data-progress=""

Answer 3

将范围更改为

scope: {
  ngModel: '@'
}

Angular JS指令不更新范围变量

3 个答案: