How do I append a div tag with a controller dynamically with angular?

Question

I'm just learning angularjs and have something working mixing jQuery with the angularjs. I know this isn't the correct way, but I don't know what is the Angularjs correct way to do this.

In the HTML I have this tag which is just a button to add the div tag dynamically onto the page.

<div ng-controller="pgCtrl">
    <button id="new-btn" ng-click="newDiv()">Gimme a div!</button>
</div>

In the javascript I have this:

app.controller('pgCtrl', function($scope){
    $scope.newDiv = function(){
        // Load an element that uses controller anotherCtrl
        $('<div class="blah" ng-controller="anotherCtrl">' +
            '<button id="another-btn" ng-click="stuff()">-</button>{{stuff}}' +
            '</div>').appendTo('body');
        angular.bootstrap($('.blah'), ['app']);
    };
});

I know this isn't the "proper" way to do this with Angularjs. I'm mixing in vary basic jQuery and it works, but I'm not learning anything doing this.

Community · Accepted Answer · 2017-05-23 10:31:12Z

6

Using angular always think about updating a scope object first ( the Model ). In markup (the View) you then have numerous ng built in directives to handle processing scope objects.

In fact when you start with angular, it's almost best not to even include jQuery in page. It helps force you to stay away from jQuery DOM manipulation methodology and start thinking Model/Controller /View

This post is a must read for anyone migrationg from jQuery to angular: How do I “think in AngularJS” if I have a jQuery background?

A simple starter for your demo would be:

app.controller('pgCtrl', function($scope){
      $scope.items=[];
      $scope.newDiv=function(){
           $scope.items.push( {stuff: 'Some stuff text'}
      }
})

Then in the view will use ng-repeat so you can clcik your button as many times as you want and keep adding stuff

<div ng-repeat="item in items" >
        <div class="blah" ng-controller="anotherCtrl">
            <button id="another-btn" ng-click="stuff()">-</button>{{item.stuff}}
         </div>

</div>

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Nov 3, 2013 at 0:35

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

padawanlvn Over a year ago

Thanks, that provided the exact help I needed. The post link you referenced is also a big help.

Collectives™ on Stack Overflow

How do I append a div tag with a controller dynamically with angular?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related