ディレクティブを介して要素のHTMLを動的に変更する

Question

ディレクティブの属性として渡される変数に基づいて要素のHTMLを変更しようとしています。

コンテンツは「This is the original content ...」に戻っているはずです。どのように動作しませんか？

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 value)という1つの変数を渡すのではなく、(passed by reference)です。

---

私はもっとうまくしようとしているものを説明するために、再び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に指示文を使用する必要があります。 これは、ここで=

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>"); 
     }) 
    } 
    } 
}); 

を使用してpassed by referenceが、何も更新されfiddle