admin管理员组文章数量:1326081
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-socialshare to display a twitter button.
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:
<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".
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.
<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
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).
How can I update the directive to display the new score that my app calculated?
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-socialshare to display a twitter button.
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:
<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".
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.
<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
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).
How can I update the directive to display the new score that my app calculated?
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Jan 22, 2015 at 20:12 Jelle Van de VlietJelle Van de Vliet 811 gold badge1 silver badge9 bronze badges 2- Yes, so when a user answers a question correct, I add one to the score. I even show the score to the user simply by {{ score }} and it works correctly. However for some reason the directive keeps showing "0" – Jelle Van de Vliet Commented Jan 22, 2015 at 20:18
- 1 Thats because the library doesn't support that behaviour. take a look to the code. Look this line: github./djds4rce/angular-socialshare/blob/master/….. Moving forward on issues for that library.. github./djds4rce/angular-socialshare/issues/17.. So. No it doesn't support double binding. – rahpuser Commented Jan 22, 2015 at 21:16
2 Answers
Reset to default 2you 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
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.
UPDATE
http://plnkr.co/edit/Y6LSXhOV1r8c4HQeDq0L?p=preview
Try this:
Your directive:
premierApp.directive('tweetbutton', function($pile) {
return {
scope: { score: "@score" },
templateUrl: 'premiers_tweetbutton.html'
};
});
And in the view
<div tweetbutton score="{{score}}"></div>
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.
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
本文标签: javascriptRefresh a directive in AngularStack Overflow
版权声明:本文标题:javascript - Refresh a directive in Angular - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742195651a2431031.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论