Угловой элемент Append OnClick

-1

Я хочу, чтобы добавить этот элемент по щелчку:Угловой элемент Append OnClick

<data-my-template/>

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> 

    <title>Angular</title> 
    <!-- CSS --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
</head> 

<body ng-app="myApp"> 

<div id="line"></div>   

<button id="insert"> Insert </button> 
<data-my-template/> 


<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
<script src="app.js"></script> 
</body> 
</html>

template.html

<div class="row"> 
    <ul class="collection"> 
    <li class="collection-item avatar"> 
     <i class="material-icons circle">folder</i> 
     <span class="title" ng-controller="name"> <b> {{ user.name + " " + user.surname }} </b></span> 
     <p>First Line <br> 
     Second Line 
     </p> 
     <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a> 
    </li> 
    </ul> 
</div>

app.js

// data 

var name = "John"; 
var surname = "Doe"; 


// codes 

var myApp = angular.module('myApp', []); 

    myApp.controller('name', ['$scope', function($scope) { 
    $scope.user = { 
     name: name, 
     surname: surname 
    };  
    }]) 

    myApp.directive('myTemplate', function() { 
    return {  
     templateUrl: 'template.html' 
    }; 
    }); 


// events 

$('#insert').click(insert); 

function insert(){ 

angular.element('#line').append("<div>TEST</div>"); 

angular.element('#line').append("<data-my-template/>"); 

}

источник

2015-12-09 Gurigraphics

Итак, в чем ваш вопрос? – jianweichuah

Работает: angular.element ('# line'). Append ("

TEST

"); Это не работает: angular.element ('# строка'). Append (""); – Gurigraphics

Вы можете использовать ниже код в качестве решения:

JS (app.js):

var myEl = angular.element(document.querySelector('#line')); 
myEl.append('Hi<br/>'); 
myEl.append('<data-my-template/>');

Приведенный выше код будет добавлять <data-my-template></data-my-template> и привести выглядеть следующим образом:

<div id="line"> 
    Hi<br> 
    <data-my-template></data-my-template> 
</div>

Просмотреть мои JSFIDDLE

Сообщите мне, если у вас есть какие-либо вопросы по этому вопросу.

источник

2015-12-09 05:46:30

Спасибо. Но не работает и не безопасен. [ngBindHtml] (https://docs.angularjs.org/api/ng/directive/ngBindHtml) – Gurigraphics

См. Мой JSFIDDLE, он отлично работает, поэтому он должен работать с вашим кодом. Повторите проверку с моим кодом. если '' небезопасно, то почему вы пытаетесь с этим? –

только html, я могу это сделать: угловой.элемент ('# строка'). Append ("Hi
"); Вы пытались Элемент? Не работает. – Gurigraphics

Лучшее, что я получил это:

HTML ...

<div id="line"></div>   

<button id="insert"> Insert </button> 
...

... 
$('#insert').click(insert); 

function insert(){ 

    var $div = $('<data-my-template/>'); 

    $('#line').append($div); 

    angular.element('#line').injector().invoke(function($compile) { 
     var scope = angular.element($div).scope(); 
     $compile($div)(scope); 
    }); 
} 
...

источник

2015-12-09 08:26:30 Gurigraphics

Вы закрываете в ответ, используя $compile службы, однако все это jQuery для щелчка h andlers и т. д. не очень хорошо.

Прежде всего, не изобретайте колесо, у угловых есть способы добавления обработчика кликов для вас (ng-click) второй никогда не манипулируйте DOM в контроллере, используйте директиву. (ведь все то, что есть у всех ng-* вещей).

В любом случае, вопрос был у. Просто создайте директиву «создатель». Он применяется к элементу, будет использовать службу $compile и добавлять ваш контент к элементу, к которому он применяется. Вы можете жестко запрограммировать этот контент, если хотите, у вас есть пара директив myTemplate и myTemplateCreator. Вы можете сделать это родовым и передать контент, который вы хотите создать. Для простоты использования ive жестко закодировано.

Таким образом, в полном комплекте:

myApp.directive("add", function($compile){ 
    return { 
     restrict: "A", 
     template: '<button ng-click="add()">Click to add buttons</button>', 
     link: function ($scope, e, a) { 
      var count = 0; 
      $scope.add = function() { 
      /* 
       The single quotes around count are important. The count attribute is a scope variable. 
       It is databound so what angular would do without the single quotes is look for a scope 
       variable called count to bind with. We don't want that we just want to pass it a single 
       string value. Hence the extra single quotes. 
      */ 
      var str = "<alert count=\"'" + count + "'\"></alert>"; 

      angular.element(e).append($compile(str)($scope)); 

      //Just so you can each add is different 
      count += 1; 
      } 
     } 
    } 
});

Что это будет сделать, это придать кнопку в элемент его применяется. Каждый раз, когда нажимается эта кнопка, она вводит директиву, называемую оповещением в тот же элемент, и увеличивает счетчик.(Директива alert расходует этот счетчик именно так, что вы можете сказать, что каждая новая директива alert отличается)

Вам не нужно использовать кнопку, чтобы на самом деле сделать создание. Эта директива может прослушивать событие, поэтому $scope.$on() может выставить метод, который вызывает ваш контроллер, он даже может поставить часы на переменную области видимости.

Важно отметить, что услуги $compile также нуждаются в области, которую будет использовать созданный контент. Моя директива add использует унаследованную область, поэтому созданный контент будет иметь ту же область действия, что и элемент, созданный директивой add. Это также не установлено в камне.

Compile Docs и Fiddle Example

Есть вопросы или что-нибудь просто спросить.

источник

2015-12-09 09:03:33 ste2425

Я видел этот пример. Вы пробовали с элементом как вопрос ? Не работает. Я не изобретал колесо. Я нашел это решение здесь: https://docs.angularjs.org/api/ng/function/angular.injector И я использовал jQuery Щелкните, потому что это событие, как и любое другое. Я мог бы использовать php, haxe, flash (И я буду использовать). Во всяком случае, спасибо за ответ. – Gurigraphics

'my-template' - это директива. «alert» в моем примере также была директивой. Я не подавал его вам на тарелку, чтобы вы могли просто скопировать и вставить в свое приложение, но показывая вам, как вы могли бы сделать это более «угловым» способом, а не вручную привязывать события и манипулировать DOM в вашем контроллере, который а не «угловой» способ работы. Вы говорите, что использование вашей собственной директивы не работает. Как это не работает? – ste2425

Хорошо. Сегодня я начал изучать углы. Более 20 часов я узнал, как это сделать. Или, может быть, с Эмбер будет лучше. Я хочу разделить мое приложение в модулях. И не переписывайте код. Также нет спагетти javascript. – Gurigraphics

Угловой элемент Append OnClick

ответ

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