Question

我对Angular很新，所以我不确定是否刷新指令＆＃34;措辞正确。我在Angular中构建了一个测验并使用djds4rce's angular-socialshare来显示一个推特按钮。

编辑：抱歉早先缺少信息。以下是更多代码：

编辑编辑：好的，这显然必须使用angular-socialshare插件或者twitter按钮。当我按下twitter按钮时：

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

我在Chrome的开发者工具中看到它正确显示了用户的分数。但是，当我点击链接时，文本突然回到＆＃34; 0＆＃34;。

HTML

我从api获得了一个列表。该列表中的每个元素（我称之为总理）都有一个名称和一个正确的＆＃39;属性。

<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',
    };
});

和templateurl是这样的：

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

现在，twitter按钮的文本（数据文本）仍然是＆＃34; 0＆＃34; （我在Controller中声明变量时的标准值）。

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

Answer 1

您可能需要这样做：

$scope.$apply()

在您的控制器功能中，但如果我能看到一个有用的插件或更多代码

制作一个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>

Answer 2

您没有告诉我们您的应用计算新值的方式和位置。

angularjs提供双向数据绑定，因此如果以编程方式更改$ scope.score = 1，它将会神奇地＆＃34;重新渲染＆＃34;新的价值。

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

这样的东西

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中的指令

2 个答案: