JS góc - Tải mẫu html từ chỉ thị trên một nút bấm

Tôi đang cố tải mẫu HTML khi liên kết được nhấp. Tôi đã thực hiện một chỉ thị có chứa templateUrl tải một tệp HTML. Tôi đang gọi một hàm khi một liên kết được nhấp vào nối thêm một div với chỉ thị tùy chỉnh "myCustomer" của chúng tôi vào một div đã có trong index.html. bất cứ điều gì tôi đã làm cho đến nay được hiển thị dưới đây, nhưng nó không hoạt động.JS góc - Tải mẫu html từ chỉ thị trên một nút bấm

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);

my-customer.html

<p>DIV CONTENT</p>

Dưới đây là liên kết tôi đã kiểm tra mã này here

Nguồn

2015-06-21 Vikram Singh Jadon

sử dụng '$ compile' dịch vụ –

làm 'myCustomer' chỉ thị có nghĩa là để tải 'templateUrl'? –

có, nó có nghĩa là tải url khi liên kết được nhấp –

T mình là do góc không ràng buộc các chỉ thị nếu bạn thêm nội dung như thế này,

bạn cần phải $compile dịch vụ để làm điều này và điều này sẽ ràng buộc các chỉ thị chống lại bạn $scope

để bộ điều khiển như thế nào,

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

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

}])

đây là DEMO

OR tốt để làm như thế này,

sử dụng ng-if để tạo ra hoặc loại bỏ các yếu tố từ html,

thử mã này

khiển,

.... 
$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>

Đề xuất

nếu mục đích chính của bạn là để đặt một nội dung html sau khi nhấp chuột, sau đó bạn có thể sử dụng ng-include đây và nó sẽ sạch hơn và không cần một chỉ thị khác.

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

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

tìm ra DEMO

Nguồn

2015-06-21 17:42:30

Giống như tôi đã hỏi và bạn đã thực hiện các thay đổi trong mã của bạn..Cool answer..What giải thích tất cả khả năng với những gì là sai và đó là đúng: p 1 từ tôi dude. Chúc mừng :) –

Điều này làm việc rất tốt đẹp, nhưng nếu tôi tạo một biểu mẫu động và muốn kết buộc các giá trị với các biến khác nhau thì sao ?? Làm cách nào để đưa chỉ mục vào biểu mẫu được thêm động? –

khi bạn làm điều đó bằng tay với append bạn thực sự không chạy $ áp dụng hoặc $ Digest để chỉ thị không được chạy, bạn có thể cố gắng làm điều đó với ng-show hay ng-if ... ví dụ:

<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>

theo cách này, góc chạy $ áp dụng và chỉ thị sẽ được hiển thị.

Nguồn

2015-06-21 17:42:55

Cách thông dụng nhất là sử dụng $compile. Thông tin thêm: Dynamically add directive in AngularJS

Sau đó điều khiển của bạn có thể trông như thế này:

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

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

Lưu ý rằng invokation chỉ nên xem xét như thế này: <div my-customer>, không <div my-Customer></div> như bạn có trong mã của bạn.

Nguồn

2015-06-21 17:49:42

thao tác DOM từ bộ điều khiển được coi là mẫu xấu –

@pankajparkar Cảm ơn bạn đã có mẹo, nhưng tôi vừa trả lời câu hỏi có gì sai trong mã Vikram. –

bạn nên có câu trả lời đúng cách để làm điều đó..không để có được OP đi sai đường .. có thể dẫn anh ta đến có thể có trong vấn đề khác nhau .. Nhưng tôi đã không downvoted: p –

Có vẻ như chỉ thị chỉ có nghĩa là để tải template từ it.I'd đề nghị bạn sử dụng ng-include chỉ thị sau đó

Markup

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

Nguồn

2015-06-21 17:55:03

cảm ơn pankaj .... mã của bạn đã giúp tôi làm điều đó mà không có một chỉ thị ... –

và tôi cũng là một trong hai người đã upvoted câu trả lời của bạn ... thnks: D –

@VikramSinghJadon Đó là lý do tại sao tôi hỏi bạn trong bình luận..Glad để giúp bạn. Cảm ơn sự đánh giá cao :) –

JS góc - Tải mẫu html từ chỉ thị trên một nút bấm

Trả lời

Các vấn đề liên quan