The life cycle of an angular application is very complicated.
You can not just add markup to work all the advantages of an angular, like two-way binding, You need to compile this markup.
In most cases, the built-in capabilities of the angulyar are enough, specifically in the case of the question, you do not need jQuery or insertion using angular.element , which, in fact, is the same jQuery, just cropped.
- You need to decide what should be the result: a list of links
- the list is subject to change
A list is an array of data, for example, you can use the push
method to change an array by adding the necessary data to it. In this case, since it is not known what exactly is needed, let the data be the sequence number of the element.
As a result, to change the list in the button handler, you need to add something to it, for example
$scope.processCreateInfo = function(event, process){ $scope.data.push($scope.data.length); }
It remains the case for the conclusion: the ng-repeat directive will help here.
Start the process
And all together:
angular.module('app', []) .controller('ctrl', function($scope) { $scope.data = []; $scope.processCreateInfo = function(event, process) { $scope.data.push($scope.data.length); }; $scope.processCreate = function(num) { console.log(num); } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <div ng-app="app" ng-controller="ctrl"> <input type="button" value="add" ng-click="processCreateInfo()" /> <div class="maintext"> <div ng-repeat="num in data"> <a class="greenbtn createbtn waves-effect waves-light btn" ng-click="processCreate(num)">Запустить процесс {{num}}</a> </div> </div> </div>