Angular JS - 단추 클릭 시 지시문에서 템플릿 html 로드
링크를 클릭하면 HTML 템플릿을 로드하려고 합니다.다음을 포함하는 지침을 만들었습니다.templateUrlHTML 파일을 로드합니다.index.html에 이미 있는 div에 사용자 지정 지시 "my customer"가 있는 div를 추가하는 링크를 클릭하면 함수를 호출합니다. 지금까지 수행한 모든 작업이 아래에 나와 있지만 작동하지 않습니다.
색인을 보다
<!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);
나의 고객
<p>DIV CONTENT</p>
여기 이 코드를 테스트하던 링크가 있습니다.
이렇게 내용을 추가하면 각이 지시를 구속하지 않기 때문에,
당신은 이것을 하기 위해 서비스를 해야하고 이것은 당신의 지시에 대한 구속력을 가질 것입니다.$scope
그래서 컨트롤러 같은 거.
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
var compiledeHTML = $compile("<div my-Customer></div>")($scope);
$("#d").append(compiledeHTML);
};
}])
여기 데모가 있습니다.
아니면 이렇게 하는 게 좋거나,
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 콘텐츠를 배치하는 것이 당신의 주된 의도라면, 당신은 여기를 사용할 수 있고 그것은 훨씬 더 깨끗하고 다른 지시사항을 필요로 하지 않을 것입니다.
<div id="d">
<div ng-include="templateURL"></div>
</div>
$scope.showdiv = function(){
$scope.templateURL = 'my-customer.html';
};
데모를 찾습니다.
지시는 단지 로드하라는 뜻인 것 같습니다.template그것으로부터.당신이 사용하는 것을 제안합니다.ng-include그때 지시하는
마크업
<a href="#" ng-click="showDiv=true">show</a>
<div id="d"></div>
<div ng-include="showDiv ? 'my-customer.html': ''">
가장 일반적인 방법은$compile. 자세한 정보: 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 );
};
}]);
지시 호출은 다음과 같이 표시됩니다.<div my-customer>,것은 아니다.<div my-Customer></div>암호에 있는 것처럼 말입니다.
append를 사용하여 수동으로 수행할 경우 실제로 $ apply 또는 $ digest를 실행하지 않으므로 명령이 실행되지 않습니다. ng-show 또는 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를 실행하고 지시가 렌더링됩니다.
언급URL : https://stackoverflow.com/questions/30967382/angular-js-load-a-template-html-from-directive-on-click-of-a-button
'codememo' 카테고리의 다른 글
| 튜플이 목록보다 메모리 공간을 적게 차지하는 이유는 무엇입니까? (0) | 2023.10.30 |
|---|---|
| 데이터 프레임을 여러 데이터 프레임으로 분할 (0) | 2023.10.30 |
| JavaScript에서 MariaDB로 데이터 전송 시 밀리초의 정확도 유지 (0) | 2023.10.30 |
| html 엔티티를 해독하는 mysql 함수가 있습니까? (0) | 2023.10.30 |
| node.js 자식 프로세스 - 스폰과 포크의 차이 (0) | 2023.10.30 |