AngularJS：控制器中的函数被模板多次调用答案

【问题标题】：AngularJS: Function in controller called multiple times by templateAngularJS：控制器中的函数被模板多次调用
【发布时间】：2016-09-08 17:57:39
【问题描述】：

我知道这个问题已经在这里被问过，似乎所有的答案都是来自 AngularJS 文档的引用或者没有提供解决方案（无论如何我都不是一个解决方案）所以我会试一试更多。

我对 Angular 的体验比较新，一个月前才开始，所以如果这是基本知识，请原谅我的无知。

在帖子列表中（使用ng-repeat 迭代）我有一个特殊的“分享到”按钮。
按钮 (href) 上的链接取决于三个不同的因素：post_id、user_id、network。

我正在尝试这样做，在我的ng-repeat="post in posts" 内

<a href ng-href="{{genShareUrl(post.id,post.author_id,'fb')}}>Facebook</a>

执行生成的原始函数是在工厂中，我只是使用genShareUrl作为控制器和工厂之间的中间人函数。

从后控制器中的genShareUrl 函数注销时，我看到该函数被多次调用。
实际上，如果我在从后端获取的所有帖子上全面运行它，我的应用程序就会停止。没有错误，只是永远加载（我认为我可能无意中触发了某种我不熟悉的永远 $digest 循环，或者至少是某种指数调用模式）。

我尝试通过一个简单的示例重新创建场景：
http://codepen.io/Mestika/pen/xVexRa

在这里我可以看到，该函数首先被调用了两次，然后被调用了四次 - 这对我来说表明摘要循环被触发了多次。

在上述情况下，如何才能最好地在链接中生成一些价值？这是最佳做法吗？如果没有，您如何或可以给我一个如何重构代码的示例。

【问题讨论】：

【解决方案1】：

Angular 使用脏检查来实现双向绑定，所有双向绑定观察者都会在每个摘要循环中被评估，这就是genShareUrl 被多次调用的原因，为了避免这种情况发生，你可以使用一个-模板中的方式绑定：

<a href ng-href="{{::genShareUrl(post.id,post.author_id,'fb')}}>Facebook</a>

【讨论】：

【解决方案2】：

我想为您的案例推荐一个最佳实践：

在激活函数中解析控制器的启动逻辑。

因此，您可以添加一个activate 函数，如下所示：

activate();

function activate() {
    angular.forEach($scope.json, function (p) {
        p.btoa = $scope.func(p.id);
    });
}

之后，您可以更新您的模板并使用：

<div ng-repeat="person in json">
    <a href ng-href="/user/{{person.btoa}}">{{person.firstName + ' ' + person.lastName}}</a>    
  </div>

这样，您将避免由于双向数据绑定行为而多次调用您的函数。

看看下面的链接：

【讨论】：