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

【问题标题】：Angular JS : Insert one directive into another directive dynamicallyAngular JS：将一个指令动态插入另一个指令
【发布时间】：2016-01-11 22:18:37
【问题描述】：

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

1) 我正在创建名为

的指令

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>

但它不起作用，我的意思是，它正在插入“ second-directive >”文本，而不是上面指令中的内容。

我是 Angular 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 很好地解释了如何动态编译和注入模板。

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案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);                  
    } 
}

【讨论】：

我按照你上面的说明完成了，它抛出错误说，“错误：[ng:areq] Argument 'scope' is required”，检查这个链接：docs.angularjs.org/error/ng/areq?p0=scope&p1=required
尝试从 firstCtrl 函数中删除 $scope 函数参数。所以...$scope.firstCtrl = function() { ...
太棒了 :) 谢谢哥们，我明白了。从 firstctrl 函数中删除 $scope 元素后。但是还有一件事，Lee，我们不必像你说的那样注入 $compile，我们可以简单地使用，就像 Angular JS 文档中的这样：“ app.directive("firstDirective", function($compile) { " 这样，它工作正常。我正在评价你。
这也是依赖注入，并且隐含在函数参数名称中。如果您缩小 js 文件并重命名参数，您的依赖注入将中断。将我的答案定义为“最佳实践”是“最佳实践”，那么参数名称是什么并不重要。
是的，你是对的@George Lee，它也与编译注入一起工作。

【解决方案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>

【讨论】：