javascript 在 Angular 中刷新指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28097829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh a directive in Angular
提问by Jelle Van de Vliet
I'm rather new to Angular, so I'm not sure if "refreshing the directive" is worded correctly. I'm building a quiz in Angular and use djds4rce's angular-socialshareto display a twitter button.
我对 Angular 比较陌生，所以我不确定“刷新指令”的措辞是否正确。我正在 Angular 中构建一个测验，并使用djds4rce 的 angular-socialshare来显示一个 twitter 按钮。
edit: sorry for the lack of info earlier. Here's more code:
编辑：抱歉之前缺少信息。这是更多代码：
edit edit: Okay, this obviously has to do either with the angular-socialshare plugin OR the twitter button. When I do this to the twitter button:
编辑编辑：好的，这显然与 angular-socialshare 插件或 twitter 按钮有关。当我对 twitter 按钮执行此操作时：
<a twitter data-text="{{score}}"></a>
I see in my Developer tools in Chrome that it correctly shows the score of the user. However when I click the link, all of a sudden the text is back to "0".
我在 Chrome 的开发人员工具中看到它正确显示了用户的分数。但是，当我单击链接时，文本突然变回“0”。
HTML
HTML
I get a list from an api. Each element (I call it premier) of that list has both a name and a 'correct' attribute.
我从 api 得到一个列表。该列表中的每个元素（我称其为 Premier）都具有名称和“正确”属性。
<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">
And I display the score for the user:
我为用户显示分数：
<span class="score" ng-bind="score"> </span>/70
JAVASCRIPT
爪哇脚本
In my Angular controller I have a variable called score
在我的 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++;
}
}
and I'm using a directive to display a tweet button so the user can tweet his score:
我正在使用指令来显示推文按钮，以便用户可以发布他的分数：
directive:
指示：
premierApp.directive('tweetbutton', function() {
return {
templateUrl: 'html_templates/premiers_tweetbutton.html',
};
});
and the templateurl is this:
和模板网址是这样的：
<a twitter
data-lang="en"
data-size="medium"
data-text="{{score}}">
</a>
Right now the text (data-text) of the twitter button remains "0" (the standard value when I declared the variable in my Controller).
现在 twitter 按钮的文本（数据文本）仍然是“0”（当我在我的控制器中声明变量时的标准值）。
How can I update the directive to display the new score that my app calculated?
如何更新指令以显示我的应用计算的新分数？
采纳答案by trickpatty
you might need to do:
你可能需要做：
$scope.$apply()
in your controller function but if I could see a plunkr or some more code that would be helpful
在您的控制器功能中，但如果我能看到一个 plunkr 或更多有用的代码
make a plunkr, lets see everything, I'd like to know what element your directive is attached to. directives will "refresh" automatically if the value of that $scope is changed. again, making a plunkr will help, I don't know how everything is looking for you.
做一个 plunkr，让我们看看一切，我想知道你的指令附加到什么元素上。如果 $scope 的值发生变化，指令将自动“刷新”。再说一次，做一个 plunkr 会有所帮助，我不知道一切都在寻找你。
UPDATE
更新
http://plnkr.co/edit/Y6LSXhOV1r8c4HQeDq0L?p=preview
http://plnkr.co/edit/Y6LSXhOV1r8c4HQeDq0L?p=preview
Try this:
试试这个：
Your directive:
您的指令：
premierApp.directive('tweetbutton', function($compile) {
return {
scope: { score: "@score" },
templateUrl: 'premiers_tweetbutton.html'
};
});
And in the view
并且在视图中
<div tweetbutton score="{{score}}"></div>
回答by Cosmin
you are not telling us how and where your app calculates the new value.
您没有告诉我们您的应用如何以及在何处计算新值。
angularjs provides two way data binding, so if you programatically change your $scope.score = 1, it will magically "re-render" the new value.
angularjs 提供了两种数据绑定方式，因此如果您以编程方式更改 $scope.score = 1，它将神奇地“重新呈现”新值。
then in your controller you can have something like
然后在你的控制器中你可以有类似的东西
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;
}
So in your views if you do something like
所以在你看来，如果你做类似的事情
<button ng-click="functionCalledByUserAction()">Set new score</button>
your score should start changing.
你的分数应该开始改变。
By the way you do not need a directive for this, you can just use
顺便说一句，您不需要为此指定指令，您只需使用
<div ng-include="html_templates/premiers_tweetbutton.html"></div>
to bring your partial in your view
把你的部分放在你的视野中
