Angular JS指令不更新范围变量

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: '@' } 。

我看到您在编写指令时遇到了一些困难。 看看我最近实现的这个 。 也许它将帮助您总结您的。

Answer 2

尝试这个：

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

并设置：

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

看到这个柱塞 。 这将设置99如果data-progress未声明，或者是data-progress=""

Answer 3

将您的范围更改为

scope: {
  ngModel: '@'
}