javascript - Refresh a directive in Angular - Stack Overflow

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?

• javascript
• angularjs
• twitter
• angularjs-directive
• angularjs-scope

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jan 22, 2015 at 20:12 Jelle Van de VlietJelle Van de Vliet 8111 gold badge11 silver badge99 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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