Изменение динамического элемента HTML с помощью директивы

Question

Я пытаюсь изменить HTML-элемент на основе переменной, передаваемой как атрибут директивы.

Содержимое должно быть изменено на «Это исходное содержимое ...». Почему это не работает?

HTML

<div ng-app="myApp" ng-controller="myCtrl"> 
    <div data-loading-data='{{testObj}}'> 
    <p> This is the original content. changingVar is '{{testObj.changingVar}}'</p> 
    </div> 
</div> 

JS

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $timeout) { 
    $scope.testObj = {}; 
    $scope.testObj.changingVar = false; 

    $timeout(function() { 
    console.log("time out is done ! the original content should be restored now (from somewhere inside the directive!)"); 
    $scope.testObj.changingVar = true; 
    }, 5000); 

}); 

app.directive('loadingData', function() { 
    return { 
    restrict: 'AE', 
    replace: 'false', 
    link: function(scope, elem, attrs) { 
     var originalHTML = elem[0].innerHTML; 
     elem.replaceWith("<p>This is modified content</p>"); 

     // When testObj.changingVar will be true, I want the original content (which is stored in var 'originalHTML') to be set! 
     // How to do? 
     // ........................................... ? 
     // ........................................... ? 
    } 
    } 
}); 

Первый ответ был полезен; извините, я случайно сохранил jsfiddle с некоторыми комментариями. Обновлено сейчас!

Был ответ, который предложил использовать объекты полезными (passed by reference) вместо передачи одной переменной (passed by value) - это было здорово знать.

---

Я обновил jsFiddle еще раз, чтобы проиллюстрировать то, что я пытаюсь сделать лучше:

https://jsfiddle.net/4xbLrg5e/6/

Answer 1

Первые вещи вы передаете testObj означает, что вы не хотите использовать унаследованный сферу с директивы.

Итак, я предполагаю, что вы хотите использовать isolated scope.

В соответствии с этим, Вот изменения,

HTML:

<div test-data='testObj'> 
    <p> This is the original content. changingVar is '{{testObj.changingVar}}'</p> 
    </div> 

Директива JS: Есть некоторая коррекция,

1. replace : false; // implicitly it is false and not 'false'; 

2. You should not replace directive with html until unless you dont want to refer it again. 

Вы можете поместить watch свойствам если вы хотите обновить html в соответствии с изменениями данных.

Вы должны использовать isolated scope с директивой в соответствии с приведенным выше допущением. Это не что иное, passed by reference использованием =

app.directive('loadingData', function() { 
    return { 
    restrict: 'AE', 
    replace: false, 
    scope : {testData:'=testData'}, 
    link: function(scope, elem, attrs) { 
     var originalHTML = elem[0].innerHTML; 
     elem.html("<p>This is modified content</p>"); 

     scope.$watch(function(){ 
       return scope.testData.changingVar; 
     },function(nVal){ 
      console.log('1') 
      elem.html("<p>Here is the original content</p>"); 
     }) 
    } 
    } 
}); 

Вот обновленный fiddle