Как обновить угловой тег

Question

Я был привлечен, чтобы исправить сайт, который был в огне пару месяцев назад. У меня есть большинство вещей под контролем, и я собираюсь установить различные элементы списка пожеланий. Один из них связан с некоторым угловым кодом, который я просто не могу сделать, чтобы делать то, что хочу. На некоторых страницах есть видеоролики, за которыми следует короткая викторина. Мне нужно обновить оценки пользователя после каждого события. До сих пор, это оказалось достаточно легко общий балл, который выглядел так:

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

И получил обновленный с этим:

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

До сих пор, так хорошо. Однако другие элементы на странице до сих пор оказались недоступными для обновления. Вот что на странице:.

Я добавил «ID =» refreshvideo»себя, так что я мог бы попытаться изменить тег Наконец, вот угловой модуль для простого круга (я ушел из фактический код рисования, так как это не совсем уместно):

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) { 

Так, на вопрос: как, черт возьми, я обновить число, отображаемое я пробовал различные вещи:

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

Ни одна из этих вещей не работала. Я проверил холст элемент в источнике в браузере, и я смог увидеть значение и значение данных теги меняются независимо от того, что я их установил, но изображение не изменилось. Я устанавливаю неправильную вещь? (Возможно, все, что угодно $ смотреть смотрит) Должен ли я заставить какую-то перекраску холста ?

Answer 1

@charlietfl означает, что ваше решение фактически не использует AngularJS - вы полностью обходите его. Угловой обеспечивает двустороннюю привязку данных между данными Javascript и HTML DOM. Все, что вы делаете, это указать, где взять данные, и это сделает это автоматически, сохраняя его актуальным с того момента, когда данные будут изменены.

В Угловом, вы никогда не вызываете getElementById, и некоторые никогда не устанавливают innerHTML, потому что тогда вы блокируете Angular от выполнения своей задачи - во многих случаях вы фактически ее нарушаете. Каждый из этих экземпляров вводит новую ошибку, а «исправляет» другую.

Возвращайтесь в свой пример шаблона линии:

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

Когда он видит это, Угловое создаст то, что она называет «наблюдателем» на profile.currentScore. Если его значение сейчас равно «1», оно отображает это как <a ...>1</a>.

Каждый цикл дайджеста, этот наблюдатель скажет ему, чтобы он посмотрел на profile.currentScore, чтобы узнать, не изменилось ли оно. Эта строка коды является довольно типичной в JS:

profile.currentScore = 42; 

Угловой будет «видеть» это произойдет через этот наблюдатель, и будет автоматически обновлять обработанный шаблон. Вы ничего не делаете - и если вы когда-нибудь почувствуете, что вам это нужно, это почти всегда означает что-то еще ошибочно.

Если вы столкнулись с этим, попробуйте «стандартное быстрое исправление». Мы видим это много с людьми, которые не архивировали приложение должным образом, и они делают обновления модели данных вне цикла Angular's digest, где они не могут «видеть» их. Попробуйте оборачивать код обновления в $ применяется() вызов:

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

Если у вас есть много обновлений, чтобы сделать, и вы не хотите, чтобы гнездиться на вызов, вы можете также обмануть, как это:

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

$scope.$apply(); 

Вы сразу же узнаете, если вам нужно это сделать. Если это сработает, вам нужно это сделать. :) Если вы получите сообщение об ошибке в своей консоли, в котором говорится, что вы уже находитесь в цикле дайджеста, вам НЕ нужно это делать (это что-то еще).

Answer 2

Я упомянул, что я думал, что, возможно, я изменял неправильный профиль переменный, и поэтому он не был освежающим. Так что я посмотрел немного в коде, который поставляет номера:

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 

Значение в $ scope.profile вытягивается из профиля, но я не совсем понимаю, как, что получает где это. Я полагаю, что мне нужно будет понять это, потому что есть другое место, где эти обновления должны произойти, что не хватает Профиль информации. В любом случае я добавил последние 4 строки вместо этого:

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

... и все работало согласно плану. Думаю, я займусь другой частью позже, когда узнаю, как данные попадают на контроллер.

Answer 3

Вы не можете сделать это таким образом. Это не угловой способ работы с данными. Прочитайте документацию до https://docs.angularjs.org/tutorial/step_04 Если вам нужно изменить документ DOM с помощью документа .. возможно, это неправильно с вашим кодом.

BTW. Прекратить использование глобальных переменных, таких как:

document.getElementById('updateafterscore')