javascript - 从模板调用函数的问题

Question

在一种情况下，我在从模板的 Controller 上运行函数时遇到问题。该值成为包含函数签名的字符串，而不是应该从函数返回的值。

当我在模板标记中使用 {{ getSomeObject(d) }} 时，它工作正常，并且打印对象值，这意味着该函数在 Controller 上被调用。

我尝试过使用和不使用 {{ }}。

伪代码:

<div class"xyz" data-lav-fact="getSomeObject(d)"> <!-- Does not work here -->
    {{ getSomeObject(d) }} <!-- Works here -->
</div>

当然，该函数会添加到 Controller 中的作用域中:

$scope.getSomeObject = function(data) {
    return { key: "test" };
};

这适用于应用程序的其他部分，我不知道在这种情况下出了什么问题。有谁知道这里通常会出现什么问题？

Answer 1

由于您尝试使用 $scope 函数设置属性，因此您需要 {{ interpolate }}并使用ngAttr attribute bindings 。这是一个简单的示例，展示了这一点的实际效果。检查注销的元素之间的差异。当您挖掘时，您会看到您的 { key: 'test' } 值已设置

<div id="without" data-lav-fact="getSomeObject()">without</div>
<div id="with" ng-attr-data-lav-fact="{{ getSomeObject() }}">with</div>

<小时/>

app.controller('ctrl', ['$scope', function($scope) {

    $scope.getSomeObject = function() {
        return { key: 'test' };
    }

    var w = angular.element(document.getElementById('with'));
    var wo = angular.element(document.getElementById('without'));

    console.log(w[0].attributes);  // has value
    console.log(wo[0].attributes); // does not have value
}]);

JSFiddle Link