0

HTML 文件 - 指令模板

<div class='class1'>  
    <span ng-show="Edit1">
        <script type="text/ng-template" id="editdetails.html">
            <div class="modal">
                <h3>Update Unit Details</h3>
                <input type='text' name='email' value=''>   
            </div>
        </script>
    </span>
</div>
<div class='class2'>  
    <span ng-show="Edit2">
                 Some content  
    </span>
</div>

角度 JS 代码

我正在将其加载到名为指令模板的 html 文件中，然后只想获取如何执行此操作的ng-template内容？editdetails.html

var directiveTemplate = null;
var req = new XMLHttpRequest(); 
req.onload = function () {
            directiveTemplate = this.responseText;
    };
var url1 = 'directivetemplate.html';
req.open('get', url1, false);
req.send();
$templateCache.put('template.html', directiveTemplate);
$edittemplate=directiveTemplate;
//The below code doesn't get me content inside the editdetails
$templateCache.put('editdetails.html',$edittemplate.filter('#editdetails.html').html());
4

1 回答 1

3

显然，您可以在 AngularJS 官方网站上阅读有关$templateCache和脚本文档的更多信息。另一种选择是尝试这个。

angular
  .module("Example", [])
  .controller("ExampleCtrl", ExampleCtrl);
  
  ExampleCtrl.$inject = ['$scope', '$templateCache'];
  function ExampleCtrl($scope, $templateCache) {
    $scope.getContent = function() {
      var script = document.getElementsByTagName("script");
      var id = script[2].id;
      var htmlContent = $templateCache.get(id);
      document.getElementById("display").innerHTML = htmlContent;
    };
  }
/* Styles go here */
.content {
  background-color: green;
  color: white;
  padding: 10px;
}

.button {
  width: 150px;
  padding: 10px;
  background-color: red;
  color: white;
  border: 0px white solid;
  border-radius: 5px;
}
<!DOCTYPE html>
<html ng-app="Example">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body ng-controller="ExampleCtrl">
    <script type="text/ng-template" id="templateId.html">
      <p class="content">This is the content of the template</p>
    </script>
    <p>
      <input type="button" class="button" ng-click="getContent()" value="Get Template's Content">
    </p>
    <div id="display"></div>
  </body>
</html>

于 2017-08-11T07:52:43.317 回答