刷新Angular中的指令

Question

我对Angular还比较陌生，所以不确定“刷新指令”是否用词正确。我正在使用djds4rce的angular-socialshare插件在Angular中构建一个测验，并使用该插件来显示Twitter按钮。

编辑：之前信息不够详细，抱歉。下面是更多代码：

编辑编辑：显然，这要么与angular-socialshare插件有关，要么与Twitter按钮有关。当我对Twitter按钮执行以下操作时：

<a twitter data-text="{{score}}"></a>

我在Chrome的开发者工具中看到它正确地显示了用户的分数。但是当我点击链接时，突然所有文本都变回“0”。

HTML

我从一个API中获取了一个列表。该列表的每个元素（我称之为premier）都有一个名称和一个“correct”属性。

<button ng-click="validateClick(premier, $index)" 
class="btn btn-default btn-game" 
data-correct="@{{premier.correct}}" 
ng-class="{'disabled btn-danger': premier.isPremier, 'disabled btn-success': premier.isRandom}" 
ng-repeat="premier in premiers" 
ng-disabled="gameOver" 
ng-bind="premier.name">

我会为用户显示分数：

<span class="score" ng-bind="score"> </span>/70

JAVASCRIPT

在我的Angular控制器中，我有一个名为score的变量。

premierApp.controller('premierController', function ($scope, $http) {

$scope.score = 0;

//so if this correct value = "premier", Game Over! if it = "random", then the user gets a point
$scope.validateClick = function (premier, index) {
    if (premier.correct == "premier") {
        premier.isPremier = true;
        $scope.gameOver = true;
        $scope.stopGame();
    } else {
        premier.isRandom = true;
        $scope.score++;
    }
}

我是一个有用的助手，可以为您进行文本翻译。

我正在使用指令来显示推特按钮，以便用户可以发布他们的分数：

指令：

premierApp.directive('tweetbutton', function() {
    return {
        templateUrl: 'html_templates/premiers_tweetbutton.html',
    };
});

而模板的URL是这样的：

<a twitter
    data-lang="en"
    data-size="medium"
    data-text="{{score}}">
</a>

目前Twitter按钮的文本（data-text）仍然是“0”（当我在控制器中声明变量时的标准值）。

我该如何更新指令以显示我的应用程序计算出的新分数？

- Jelle Van de Vliet

---

是的，所以当用户回答问题正确时，我会将分数加一。我甚至通过 {{ score }} 向用户显示分数，它也能正常工作。但是由于某种原因，指令仍然显示“0”。 - Jelle Van de Vliet

这是因为该库不支持该行为。看一下代码。看看这一行：https://github.com/djds4rce/angular-socialshare/blob/master/angular-socialshare.js#L112..在解决该库的问题时，向前迈进.. https://github.com/djds4rce/angular-socialshare/issues/17.. 所以，它不支持双向绑定。 - rahpuser

Answer 1

你可能需要做的：

$scope.$apply() 

在你的控制器函数中使用，如果我能看到一个plunkr或者更多的代码将会很有帮助。

建立一个plunkr，让我们看到一切，我想知道你的指令附加在哪个元素上。指令会自动“刷新”，如果那个$scope的值被改变。再次强调，建立一个plunkr会对你很有帮助，我不知道你的代码是什么样子的。

更新

http://plnkr.co/edit/Y6LSXhOV1r8c4HQeDq0L?p=preview

试试这个：

你的指令：

premierApp.directive('tweetbutton', function($compile) {
   return {
       scope: { score: "@score" },
       templateUrl: 'premiers_tweetbutton.html'
   };
});

在这个视角中

<div tweetbutton score="{{score}}"></div>

- trickpatty

---

你将'tweetbutton'应用于哪个元素？顺便说一句，在指令中通常将其命名为'tweetButton'，然后在视图中引用它，如<div tweet-button> @JelleVandeVliet - trickpatty

好的，我会为你创建一个 Plunkr……等我一下，去拿个红牛和士力架。 - trickpatty

@PatrickLawler 你好 Patrick，我将它应用到了一个 div 上。我又编辑了一次我的 OP，现在它可以更新分数了。但是当我点击推特按钮时，它只显示“0”。 - Jelle Van de Vliet

看一下这个 Plunker 中的指令，你能否尝试使用你的代码并查看是否有帮助？如果没有，那么它似乎可能是 @rahpuser 谈论的问题，但你仍然应该能够解决它。http://plnkr.co/edit/Y6LSXhOV1r8c4HQeDq0L?p=preview - trickpatty

抱歉晚了 @PatrickLawler。非常感谢您的帮助！您的 plnkr 确实与我拥有的相同，但是 socialshare 库存在问题。 - Jelle Van de Vliet

Answer 2

你没有告诉我们你的应用程序如何在哪里计算新值。

AngularJS 提供了双向数据绑定，因此如果您以编程方式更改 $scope.score = 1，它将神奇地“重新渲染”新值。

然后在您的控制器中，您可以有类似以下的内容

premierApp.controller('premierController', function ($scope, $http) {

   $scope.score = 0;

   $scope.functionCalledByUserAction = function () {
     var newScore = $scope.score++; //replace this your code here to set a newScore
     $scope.score = newScore;
   }

所以在你的观点中，如果你做了类似这样的事情

<button ng-click="functionCalledByUserAction()">Set new score</button>

你的分数应该开始改变了。

顺便说一句，你不需要一个指令来实现这个，你可以直接使用

<div ng-include="html_templates/premiers_tweetbutton.html"></div>

将你的部分带到你的视图中

- Cosmin