javascript - Angular JS指令不更新范围变量

Question

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

这是我描述我的范围的方式:

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

这些属性以下列方式显示在 View 中:

<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我最近实现了。也许它会帮助你结束你的。