AngularJS動態模板更新

Question

我有一個AngularJS應用程序，我沒有更新的權限，但是我可以在頁面加載/初始化後執行JavaScript。

我需要做的是更新組件標記中的一堆文本。但我無法更新AngularJS repeater元素（相關項目）中的內容，因爲它看起來像Angular已經在頁面初始化時將其編譯爲模板。

從哪裏可以進入範圍訪問中繼器模板來更新標記並重新編譯它？

<div class="item-grid" ng-controller="ItemGridCtrl" ng-cloak item-grid> 

    <h2>Item Grid</h2> 

    <div class="item-grid__item-details"> 
     <div class="item-grid__item0"> 

      <button add-item="{12345}">ADD</button> 

     </div>    
     <div class="item-grid__item1"> ... </div> 
     <div class="item-grid__item2"> ... </div> 
    </div> 

    <div class="item-grid__modal" item-grid-modal> 
     <h3>Want to add another item?</h3> 
     <div related-items ng-repeat="item in relatedItems"> 
      <div class="item-grid__related-item" data-related-item-info> 
       <span class="item-grid__heading">{{item.title}}</span> 
       <span class="item-grid__label">TEXT TO CHANGE</span> 
       <button class="item-grid__btn" related-item="{{item.id}}">ADD+</button> 
      </div> 
     </div> 
    </div> 

</div> 


(function (modules) { 

    //register this module to be injected into the main app as a dependency. 
    modules.push("FooApp.itemGrid"); 

    //define "Product Grid" module 
    var app = angular.module("FooApp.itemGrid", []); 

    app.controller('ItemGridCtrl', ['$scope', '$rootScope', 
    function ($scope, $rootScope) { 

     //does controller stuff 

    }]); 

    app.directive('addItem', ['FooService', '$rootScope', '$timeout', 
    function(FooService, $rootScope, $timeout) { 
     return { 
      restrict: 'A', 
      scope: false, 
      link: function($scope, el, attrs) { 

       el.bind('click', function(e) { 

        //http post to add item to session 
        FooService.addItem({$scope.getJsonData(), function(response){ 

         //post successful... pop up modal to show related items 

         $scope.relatedItems = $scope.filterSomeData(); 

         if ($scope.relatedItems.length > 0) { 
          $scope.modal.show(); //popup the modal 
          $scope.modal.find('[ng-repeat] [data-related-item-info]').each(function() { 
           window.foo.angular.components.attachComponents(this); 
          }); 
         } 

        }); 
        } 
       }); 
      } 
     }; 
    }]); 


    app.directive('itemGridModal', ['$rootScope', function($rootScope) { 
     return { 
      restrict: 'A', 
      scope: false, 
      link: function($scope, el, attrs) { 
       $scope.modal = el.find('[modal]'); //adds modal element to controller scope 
      } 
     }; 
    }]); 

})(window.foo.angularModules); 

Answer 1

要更改模板，您可能需要訪問該角度應用的$ templateCache服務。沒有任何一種$範圍。 https://docs.angularjs.org/api/ng/service/ $ templateCache

不確定是否有可能做到這一點，但如果可以的話，祝你好運，因爲那會很酷。

---

另一種解決辦法是使用一個MutationObserver（原生瀏覽器類）監聽DOM變化和運行自己的代碼來檢查/角已經做了部分更新後的視圖。這將是修改$ templateCache的更重的解決方案，但它肯定可以工作。

var mutationObserver = new MutationObserver(_.debounce(handleDomChanges, 25)); 
mutationObserver.observe(element, {childList: true, subtree: true, attributes: false}); 

注意：_.debounce函數是一個lo-dash庫方法，可防止此回調每秒運行太多次。