Заставьте Angularjs повторно присоединить DOM-узел вместо его обновления

Question

В моем шаблоне в настоящее время у меня есть что-то вроде этого:

<div>
    <a ng-href="tel:{{phone}}">{{ phone }}</a>
</div>

При изменении значения $scope.phone angular обновит узел DOM ссылки, чтобы сделать его ссылкой на новый номер телефона.Это отлично работает.

Однако существует широко используемый плагин для браузера, который заменяет номер телефона в теге <a> на отформатированный номер телефона + значок.К сожалению, когда переменная $scope.phone изменяется, angularjs обновляет узел DOM, но плагин браузера не обнаруживает это и продолжает показывать старый номер телефона.

Чтобы решить эту проблему, я думал о повторном присоединении всего div илиссылка на страницу при каждом изменении свойства телефона.Здесь есть что-то в angularjs, которое позволяет мне легко это сделать (т. Е. Повторно присоединить dom-узел вместо его обновления?).

Решение, которое у меня есть сейчас, - временно установить свойство $ scope.reattachв true и через 0 миллисекунд снова установите его в false.Затем проверьте это свойство в ng-if.Но это так грязно.

Answer 1

То, что я сделал бы, немного грязно, но надежно.Я бы использовал ng-repeat с массивом из одного телефона.Тогда я бы push() новый телефон и shift() массив, чтобы удалить первый.

HTML:

<div>
    <a ng-repeat="phone in phones track by phone" 
       ng-href="tel:{{phone}}">{{ phone }}</a> 
       <!-- Track by phone cause the new phone will have the same index as the old one like mentionned by skyboyer in the comment -->
</div>

JS:

$scope.phones = [];
$scope.changePhone = function(phone) {
    $scope.phones.push(phone); // Add the new phone to the end of the array.
    $scope.phones.shift(); // Remove the old phone at the beginning.

};