如何刷新角度标签

Question

I was brought in to fix a website that was on fire a couple months back. I've got most things under control and I'm down to fixing various wish-list items. One of them involved some angular code that I just can't seem to get to do what I want. On some pages there are videos followed by a short quiz. I need to update the user's scores after each event. So far, this proved to be easy enough for the total score which looked like this:

 <a id="updateafterscore" href="~/user/leaderboard/" class="fill-div">
                                {{ profile.currentScore }}
                            </a>

And that got updated with this:

document.getElementById('updateafterscore').innerHTML = data.Data.CurrentScore;

So far, so good. However other elements on the page have, thus far, proved impossible to update. Here's what's on the page:

I added the "id="refreshvideo" myself so I could try to alter the tag. Finally, here's the angular module for simple-circle (I've left out the actual drawing code since it's not really relevant):

angular.module('thrive.shared').directive('simpleCircle', function() {

return{
    replace: true,
    template: '<canvas width="60" height="60" style="margin: -10px 0 0 -15px;"></canvas>',
    restrict: 'E',
    scope: {
        value: '@',
        color: '@',
        bgColor: '@',
        forecolor: '@',
        radius: '@'
    },
    link: function (scope, elem, attrs) {

        var multiplyLength = 1;
        var canvasElem = elem[0];
        var inMotion = false;

        if (scope.value <= 2) {
            multiplyLength = 5;
        }

        scope.$watch('value', function() {
            drawCircle(canvasElem, scope.color, scope.value * multiplyLength, scope.value, scope.name);
        });


        function drawCircle(canvas, color, calculatedPoints, displayPoints, name) {

So, to the question: how the heck do I update the number that's displayed? I tried various things:

document.getElementById('refreshvideo').setAttribute('value', data.Data.VideoWatchedCount);
document.getElementById('refreshvideo').setAttribute('data-value', data.Data.VideoWatchedCount);
$scope.profile.videosWatched = data.Data.VideoWatchedCount;

None of these things worked. I inspected the canvas element in the source in the browser and I could see the value and data-value tags change to whatever I set them, but the image remained unchanged. Am I setting the wrong thing? (Perhaps whatever $watch is watching) Do I have to force some kind of re-paint of a canvas element?

Answer 1

@charlietfl means your solution is not actually using AngularJS - you're completely bypassing it. Angular provides two-way data binding between Javascript data and the HTML DOM. All you do is tell it where to draw data, and it will do that for you automatically, keeping it up to date from then on as the data changes.

In Angular, you never call getElementById and certain never set innerHTML because then you block Angular from doing its thing - in many cases you actually break it. Every one of those instances introduces a new bug while "patching" another.

Go back to your example template line:

<a ..attributes...>{{ profile.currentScore }}</a>

When it sees this, Angular will create what it calls a "watcher" on profile.currentScore. If its value right now is '1', it will render this as <a ...>1</a> .

Every digest cycle, that watcher will tell it to look at profile.currentScore to see if it changed. This line of code is pretty typical in JS:

profile.currentScore = 42;

Angular will "see" this happen through that watcher, and will automatically update the rendered template. You do nothing else - and if you ever feel that you need to, it almost always means something else is wrong.

If you're running into this a lot, try the "standard quick-fix". We see this a lot with people who didn't architect an application properly, and they're doing data model updates outside Angular's digest cycle where it can't "see" them. Try wrapping your update code in an $apply() call:

$scope.$apply(function() {
    profile.currentScore = 42;
});

If you have a LOT of updates to make and you don't want to nest the call, you can also cheat, like this:

// Lots of stuff...
profile.currentScore = 42;
// Lots more stuff...

$scope.$apply();

You will know right away if you need to do this. If it works, you need to do it. :) If you get an error message in your console saying you're already in a digest cycle, you do NOT need to do it (it's something else).

Answer 2

I mentioned that I thought perhaps I was modifying the wrong profile variable and so it wasn't refreshing. So I looked back a little bit in the code that is supplying the numbers:

angular.module('episodes').controller('episodeCtrl', ['$scope', '$rootScope', '$window', 'episode', 'relatedCourses', 'Video', 'episodeItems', 'profile', 'Profile',
function ($scope, $rootScope, $window, episode, relatedCourses, Video, episodeItems, profile, Profile) {
// stuff skipped....
                        onComplete: function () {
                            Video.complete({ videoId: item.item.id }).$promise.then(function () {
                                item.progress = "Completed";
                                $scope.loadNextItem();
                                $scope.profile = Profile.get();   // <<-- gotten from somewhere

                                $.ajaxSetup({ cache: false });
                                $.get('/user/getCurrentUserPointsModel', function (data) {
                                    if (data == "")
                                        return;
                                    $scope.profile.currentScore = data.Data.CurrentScore;
                                    $scope.profile.videosWatched = data.Data.VideoWatchedCount;
                                    $scope.profile.testTakenAndCorrectAnswerCount = data.Data.TestTakenAndCorrectAnswerCount;
                                    Profile.save();    // <-- added

The value in $scope.profile is pulled from Profile , but I don't fully get how that gets where it is. I suppose I will need to figure that out because there's another place where these updates have to happen that lack that Profile information. Anyways I added the last 4 lines in place of this:

document.getElementById('updateafterscore').innerHTML = data.Data.CurrentScore;

... and all worked according to plan. I guess I tackle the other part later when I figure out how the data gets to the controller.

Answer 3

You can't do this that way. It's not Angular way of dealing with data. Read the documentation before https://docs.angularjs.org/tutorial/step_04 If you need to modify your DOM using document.. probably sth wrong is with your code.

BTW. Stop using globals like:

document.getElementById('updateafterscore')