2015-06-21 3 views
19

Я пытаюсь загрузить HTML-шаблон при нажатии ссылки. Я создал директиву, содержащую templateUrl, которая загружает HTML-файл. Я вызываю функцию при щелчке ссылки, которая добавляет div с нашей настраиваемой директивой «myCustomer» к div уже в index.html. все, что я сделал до сих пор, показано ниже, но это не сработает.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

+1

использование '$ compile' сервис –

+0

делает' myCustomer' директива, предназначенная для загрузки 'templateUrl'? –

+0

Да, он предназначен для загрузки URL-адреса при нажатии ссылки. –

ответ

31

T его потому, что угловое не связывает директивы, если вы добавите содержание, как это,

вам нужно $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

+1

Как я спросил, и вы внесли изменения в свой код ... Ответ на вопрос. Что объясняет всю возможность с неправильным и правильным: p +1 от меня чувак. Cheers :) –

+0

Это работает очень хорошо, но что делать, если я создал форму динамически и хочу связывать значения с разными переменными? Как получить индекс для динамически добавленной формы? –

0

когда вы делаете это вручную с Append вы на самом деле не запустить $ применять или $ дайджеста поэтому директива не бежать, вы можете попробовать сделать это с нг-шоу или 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 и будет выдана директива.

0

Наиболее распространенным способом является использование $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>, как у вас есть в вашем коде.

+4

манипулирование DOM с контроллера считается плохой шаблон –

+0

@pankajparkar Спасибо за отзыв, но я только что ответил на вопрос, что было не так в коде Vikram. –

+0

, у вас должен быть правильный ответ. Не пытайтесь делать OP неправильно. Это может привести к тому, что он может попасть в другую проблему. Хотя я не остановился: p –

8

Похоже директива предназначена только для загрузки template из it.I'd предлагаем вам использовать директиву ng-include затем

Markup

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

спасибо pankaj .... ваш код помог мне сделать это без директивы ... –

+0

, а также я один из двух людей, которые поддержали ваш ответ ... thnks: D –

+0

@VikramSinghJadon Вот почему я попросил вас в комментарии .. Глэд, чтобы помочь вам. . Спасибо за оценку :) –

Смежные вопросы