从模板调用函数的问题答案

【问题标题】：Issues with calling function from template从模板调用函数的问题
【发布时间】：2015-04-21 15:18:32
【问题描述】：

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

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

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

伪代码：

<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" };
};

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

【问题讨论】：

指令lavFact 是什么样的？我想如果你删除 data-lav-fact="getSomeObject(d)" 它会起作用，所以问题在于指令以及它如何转置数据。
这个真的需要更多细节...
...特别是如何定义 lavFact 指令的隔离范围。
你能把你的完整代码扔进一个splunker吗？
您在这方面取得了进展吗？我的回答有帮助吗？我们将不胜感激，因此我们可以尝试帮助您解决此问题

标签： javascript jquery angularjs angularjs-scope

【解决方案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

【讨论】：