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

回答

相关问题