Question

首先，我的方式可能不正确。但我会解释这个问题：

1）我正在创建一个名为＆lt;的指令firstDirective＆gt;

2）当点击第一个指令中的按钮时，我试图在运行时动态插入第二个指令

如下：

<!DOCTYPE html>
<html>
<script src="lib/angular/angular.js"></script>
<body ng-app="myApp">

<first-directive></first-directive>

<script>
var app = angular.module("myApp", []);
app.directive("firstDirective", function() {
    return {
       template : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click="firstCtrl()">Click Me to second directive!</button> <div id="insertSecond"></div> ',
        controller: function ($scope) {
              $scope.firstCtrl = function($scope) {
                    angular.element(document.querySelector('#insertSecond')).append('<second-directive></second-directive>');                  
              } 
        }
    }
});        

app.directive("secondDirective", function() {
    return {
       template : '<h1>This is second directive!</h1> <br / ><br / >',
        controller: function ($scope) {

        }
    }
});        


 </body>
 </html>

但它不起作用，我的意思是它插入了“＆lt; second-directive＆gt;＆lt; / second-directive＆gt;”文字但不符合上述指令的内容。

我是角度js的新手，我想我们可以用不同的方式做到这一点，或者我的方法本身不正确。但我只想动态插入第二个指令。

编辑:: 我得到了解决方案，感谢George Lee：

解决方案是我们必须按如下方式编译，但没有将范围对象传递给函数：

<!DOCTYPE html>
<html>
<script src="lib/angular/angular.js"></script>
<body ng-app="myApp">

<first-directive></first-directive>

<script>
var app = angular.module("myApp", []);
app.directive("firstDirective", function($compile) {
    return {
       templateUrl : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click="firstCtrl()">Click Me to second directive!</button> <div id="insertSecond"></div> ',
        controller: function ($scope) {
              $scope.firstCtrl = function() {
                    var ele = $compile('<second-directive></second-directive>')($scope);
                    angular.element(document.querySelector('#insertSecond')).append(ele);                  
              } 
        }
    }
});        

app.directive("firstDirective", function() {
    return {
       templateUrl : '<h1>This is second directive!</h1> <br / ><br / >',
        controller: function ($scope) {

        }
    }
});

此外，这个link给出了如何动态编译和注入模板的非常好的解释。

Answer 1

您可以在Angular中使用$compile服务，确保将其包含在依赖注入中。

app.directive("firstDirective", ['$compile', function($compile) {
...
controller: function ($scope) {
    $scope.firstCtrl = function() {
         var ele = $compile('<second-directive></second-directive>')($scope);
         angular.element(document.querySelector('#insertSecond')).append(ele);                  
    } 
}

Answer 2

还有一个问题，而不是templateUrl，模板应该在那里

    <!DOCTYPE html>
     <html>
        <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>

         <first-directive></first-directive>

     <script>
      var app = angular.module("myApp", []);
          app.directive("firstDirective", function($compile) {
              return {
              template : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click="firstCtrl()">Click Me to second directive!</button> <div id="insertSecond"></div> ',
              controller: function ($scope) {
              $scope.firstCtrl = function() {
                var ele = $compile('<second-directive></second-directive>')($scope);
                angular.element(document.querySelector('#insertSecond')).append(ele);
             }
         },
          restrict: "EAC"

   }

}）;

          app.directive("secondDirective", function() {
             return {
             template : '<h1>This is second directive!</h1> <br / ><br / >',
             controller: function ($scope) {

       },
             restrict: "EAC"
    }
  });
     </script>
   </body>
 </html>

Angular JS：动态地将一个指令插入另一个指令

2 个答案: