Angular JS - 從點擊按鈕加載指令模板html

我試圖在單擊鏈接時加載HTML模板。我做了一個包含加載HTML文件的templateUrl的指令。我點擊一個鏈接時會調用一個函數，該鏈接將div的自定義指令「myCustomer」附加到已在index.html中的div。不管我迄今爲止所做的操作如下所示，但它不起作用。Angular JS - 從點擊按鈕加載指令模板html

的index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-example12-production</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<body ng-app="docsTemplateUrlDirective"> 
    <div ng-controller="Controller"> 
    <a href="#" ng-click="showdiv()">show</a> 
    <div id="d"></div> 
</div> 
</body> 
</html>

的script.js

(function(angular) { 
    'use strict'; 
angular.module('docsTemplateUrlDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 

    $scope.showdiv = function(){ 
     $("#d").append("<div my-Customer></div>"); 
    }; 
    }]) 
    .directive('myCustomer', function() { 
    return { 
     templateUrl: 'my-customer.html' 
    }; 
    }); 
})(window.angular);

我-customer.html

<p>DIV CONTENT</p>

這裏是鏈接我在測試這個代碼here

來源

2015-06-21 Vikram Singh Jadon

使用'$ compile'服務 –

呢'myCustomer'指令意味着加載'templateUrl'？ –

是的，它意味着當鏈接被點擊時加載網址 –

Ť他是因爲如果附加了這樣的內容的角度不綁定的指令，

需要$compile服務要做到這一點，這將綁定指令對你$scope

所以控制器一樣，

.controller('Controller', ['$scope', '$compile', function($scope, $compile)  { 

    $scope.showdiv = function(){ 
     var compiledeHTML = $compile("<div my-Customer></div>")($scope); 
     $("#d").append(compiledeHTML); 
    }; 

}])

這裏是DEMO

或好做這樣的，

使用ng-if創建或從HTML移除元件，

試試這個代碼

控制器，

.... 
$scope.anableCustomerDirective = false; 
$scope.showdiv = function(){ 
    $scope.anableCustomerDirective = true; 
};

HTML

<body ng-app="docsTemplateUrlDirective"> 
    <div ng-controller="Controller"> 
     <a href="#" ng-click="showdiv()">show</a> 
     <div id="d"> 
      <div my-Customer ng-if='anableCustomerDirective'></div> 
     </div> 
</div> 
</body>

建議

，如果你的主要目的是將點擊後的HTML內容，那麼你可以在這裏使用ng-include，它會更清潔，不需要一個又一個指令。

<div id="d">   
    <div ng-include="templateURL"></div> 
</div> 

$scope.showdiv = function(){ 
     $scope.templateURL = 'my-customer.html'; 
};

找到DEMO

來源

2015-06-21 17:42:30

它就像我問，你在你的代碼中做出了改變..酷的答案..這是解釋所有的可能性，什麼是錯的，哪個是正確的：p來自我的夥計+1。乾杯:) –

這是工作非常好，但如果我動態創建一個表單，並希望綁定值與不同的變量？如何獲得動態添加表單的索引？ –

當你追加，你居然不運行$應用或$消化這麼指令不運行做手工，可以嘗試用NG-演出或做ng-if ...例如

<body ng-app="docsTemplateUrlDirective"> 
    <div ng-controller="Controller"> 
    <a href="#" ng-click="showdiv = true">show</a> 
    <div my-customer ng-if="showdiv"></div> 
    <div id="d"></div> 
</div> 
</body>

這樣，角度運行$ apply並且指令將被渲染。

來源

2015-06-21 17:42:55

最常用的方法是使用$compile。更多信息：Dynamically add directive in AngularJS

然後你的控制器可以是這樣的：

angular.module('docsTemplateUrlDirective', []) 
    .controller('Controller', ['$scope', '$compile', function($scope, $compile) { 

    $scope.showdiv = function(){ 
     var el = $compile("<div my-customer></div>")($scope); 
     $('#d').append(el); 
    }; 
    }]);

注意，該指令invokation應該是這樣的：<div my-customer>，因爲你在你的代碼不<div my-Customer></div>。

來源

2015-06-21 17:49:42

從控制器操縱DOM被認爲是壞模式 –

@ pankajparkar感謝您的提示，但我剛剛回答了Vikram代碼中出了什麼問題。 –

你應該以正確的方式回答這個問題..不要讓OP以錯誤的方式進行......這可能會導致他得到不同的問題。儘管我沒有downvoted：p –

好像指令只是爲了加載template從it.I'd建議您使用ng-include指令然後

標記

<a href="#" ng-click="showDiv=true">show</a> 
<div id="d"></div> 
<div ng-include="showDiv ? 'my-customer.html': ''">

來源

2015-06-21 17:55:03

感謝pankaj ....你的代碼幫我做了沒有指示... –

，我也是兩個人upvoted你的答案之一... thnks：D –

@VikramSinghJadon這就是爲什麼我問你的評論..很高興幫助你。感謝讚賞:) –

Angular JS - 從點擊按鈕加載指令模板html

回答

相關問題