Question

我有以下angular示例应用：

<html ng-app="theapp">
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
   </head>
   <body>
      <div ng-controller="bootstrapper">
         <p>This is the bootstrapper</p>
         <p><button ng-click="loadtemplate1()">Load Template1</button></p>
         <p><button ng-click="testalert()">Test Alert</button></p>
      </div>
      <script type="text/html" id="template1">
         <div ng-controller="template1">
         <p>This is template one {{1+5}}</p>
         </div>
      </script>
      <script type="text/javascript">
         angular.module('theapp',[])
         .controller('bootstrapper',function($scope){
            //alert('bootstrapper controller');

            $scope.testalert=function(){
                alert('call from testalert');
            };
            $scope.loadtemplate1=function(){
                var html=document.getElementById('template1').innerHTML;
                document.getElementsByTagName('body')[0].innerHTML=html;
            };
         })
         .controller('template1',function($scope){
            alert('template1 controller');
         });
      </script>
   </body>
</html>

我试图实现的是从一些位于同一页面的html字符串动态加载控制器。

但是，我需要一些帮助，因为目前的设置似乎不起作用。

Angular：从内联模板html加载控制器

0 个答案: