Angular JS：動態地將一條指令插入另一條指令

首先，我所做的方式可能不正確。但我會解釋這個問題：Angular JS：動態地將一條指令插入另一條指令

1）我創建指令稱爲< firstDirective>

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>

但它不工作，我的意思是，它被插入「<秒-指令> < /第二指令>」的文本，但不續根據上面的指令。

我是新來的角js，我認爲我們可以用不同的方式做到這一點，或者我的方法本身是不正確的。但是，我想要動態插入第二個指令。

編輯::我得到了這個解決方案，這要歸功於喬治·李：

解決方案是我們必須編譯如下，但範圍對象不傳遞給函數：

<!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，給出瞭如何動態編譯和注入模板的很好的解釋。

來源

2016-01-11 user3278897

您可以在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);     
    } 
}

來源

2016-01-11 22:31:22

我照你上面指定的，它拋出錯誤說像「錯誤：[NG：AREQ]參數‘範圍’需要」，檢查此鏈接：https://docs.angularjs.org/錯誤/ ng/areq？p0 = scope＆p1 =必需 – user3278897

嘗試從'firstCtrl'函數中移除'$ scope'函數參數。所以...'$ scope.firstCtrl = function（）{...' –

偉大的:)感謝夥計我明白了。從firstctrl函數中移除$ scope元素後。但是還有一件事情，我們不需要像你說的那樣注入$ compile，我們可以簡單地使用，就像Angular JS Documentation中的一樣：「app.directive（」firstDirective「，function（$ compile）{」這樣，工作正常我給你評分 – user3278897

還有一個問題，而不是templateUrl，模板應該是有

<!DOCTYPE html> 
    <html> 
     <script data-require="[email protected]" 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>

來源

2017-01-16 07:06:55

Angular JS：動態地將一條指令插入另一條指令

回答

相關問題