在 Angular 中刷新指令

Question

我是 Angular 的新手，所以我不确定“刷新指令”的措辞是否正确。我正在 Angular 中构建一个测验并使用 djds4rce's angular-socialshare 显示 Twitter 按钮。

编辑：抱歉之前缺少信息。这是更多代码：

edit edit：好的，这显然与 angular-socialshare 插件或 Twitter 按钮有关。当我对 Twitter 按钮执行此操作时：

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

我在 Chrome 的开发者工具中看到它正确显示了用户的分数。但是，当我单击 link 时，文本突然变回“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',
    };
});

模板网址是这样的：

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

现在 twitter 按钮的文本（数据文本）仍然是“0”（我在控制器中声明变量时的标准值）。

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

Answer 1

您可能需要做：

$scope.$apply()

在你的控制器函数中，但如果我能看到一个 plunkr 或更多有帮助的代码

做一个plunkr，让我们看看一切，我想知道你的指令附加到哪个元素。如果该 $scope 的值发生变化，指令将自动 "refresh" 。再次，做一个 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>

Answer 2

您没有告诉我们您的应用如何以及在何处计算新值。

angularjs 提供两种方式的数据绑定，因此如果您以编程方式更改 $scope.score = 1，它将神奇地 "re-render" 新值。

然后在你的控制器中你可以有类似

的东西

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>

让你的部分出现在你的视野中

在 Angular 中刷新指令

Refresh a directive in Angular

javascript

angularjs

twitter

angularjs-directive

angularjs-scope