Как добавить div в один div с помощью angularjs

 <div data-ng-controller="maincontrol">
   <div class="main">
   </div>
  <button data-ng-click="submit()">click</button>
 </div>

когда я нажимаю кнопку мыши, я хочу добавить один div в основной div. Я хочу добавить один новый div (динамически) для каждого щелчка. Также я хочу найти, существуют ли дети div или нет.

Я буду делать это в jquery

$('main').append();

я передам div в append();

но как это сделать, используя angular.. js?

Ответ 1

Использование директивы может быть решением, но оно все еще слишком близко к jQuery. Когда вы играете с Angular, вам нужно думать по-другому.

jQuery является процедурным.

1- Я нахожу элемент в dom

2- Я делаю некоторые вещи

3- Я добавляю, удаляю, обновляю элементы в dom

angular является декларативным

Вы определяете свои данные
Вы определяете, как должны отображаться ваши данные (используя ng-repeat, ng-class и т.д.)

то..

когда вы играете с вашими данными, представление автоматически обновляется.

Если вы хотите правильно сыграть с angular, вы должны сделать что-то вроде:

Шаблон:

 <div class="main">
    <div ng-repeat="stuff in stuffs"><h1>{{stuff.title}}</h1> <p>{{stuff.content}}</p></div>
 </div>

Контроллер:

function MainCtrl() {
    $scope.stuffs = [];
    $scope.submit = function() {
       $scope.stuffs.push({title: 'Hello', content: 'world'});
    }
}

Ответ 2

Как правило, лучше всего создать директиву для манипуляций с DOM (многие другие используют также директивы).

В рамках директивы вы имеете доступ к angular.element. Если jQuery установлен до angular.js на странице, это объект jQuery, в противном случае это объект jqLite, который имеет много методов, совместимых с jQuery.

Очень простой пример:

 <button data-ng-click="submit()" my-directive>click</button>

app.directive('myDirective',function(){
     return function(scope, element, attrs){
          element.click(function(){
               element.parent().find('.main').append('<div>Some text</div>')
           })
      }
})

Прочитайте директивы и angular.element