Question

我正在尝试在指令中使用多个ng-bind而不是{{}}，但没有运气。

<my-directive att1="age" att2="22"></my-directive>

angular
    .module("app",[])
    .directive('myDirective', myDirective);

function myDirective() {
    return {
        restrict: 'E',
        scope: {
            att1: '@',
            att2: '@'
        },
        template: '<div class="ng-bind: att1;" ng-bind="att2"></div>'
    }
}

如果只有一个ng-bind，则没问题。如果我有多个，就像在这种情况下，我在某处读到了我正在使用的符号"ng-bind: att;"，但它没有用。

另外，我想知道我是否真的需要它。显然使用ng-bind可以避免在加载数据之前屏幕中双括号闪烁的问题，在这种情况下它并不重要，因为我将值用作类属性，因此没有显示在屏幕上。另一方面，使用ng-bind应该更有效率。

有什么想法吗？我在stackoverflow中看到了几个关于此的问题，但似乎没有一个问题可以解决这个问题。

Answer 1

每个属性只能有一个ng-bind。 ng-bind的值将写为div标记的内容。当你有多个ng-bind时，它们会相互覆盖，所以这是不可能的。

但是，如果您要设置课程，请查看此处的ngClass指令https://docs.angularjs.org/api/ng/directive/ngClass。您的模板看起来像这样：

template: '<div ng-class="att1" ng-bind="att2"></div>'

这会将att1的内容设置为class="..."的{{1}}属性，将div的内容设置为att2的内容。渲染的输出可以是

div

如果你想要多个<div class="your-att1-value">your att2 value</div>，你可以为每个ng-bind插入一个seperat标签，如下所示：

ng-bind

在同一指令中多次ng-bind

1 个答案: