Here is a function in which the element is added:

$scope.processCreateInfo = function(event, process){ $('.maintext').append('<a class="greenbtn createbtn waves-effect waves-light btn" ng-click="processCreate()">Запустить процесс</a>'); } 

However, the processCreate function does not work when we click on a new item.

 $scope.processCreate = function(){ alert(1) } 
  • Maybe it is necessary to decide all the same jQuery or angular? mixing good stuff won't work out - Grundy
  • and how on angular then? - splincode
  • it all depends on the task. In angular, the basis is the data, in this case it is not clear what and why. Just head-on can be solved using an array on which using ng-repeat to output these links inside maintext ? and by the processCreateInfo button , just add an element to the array, the rest will be done by an angular - Grundy
  • var wrap = angular.element ('. maintext'); angular.element (wrap) .append ('<a class="greenbtn createbtn waves-effect waves-light btn" ng-click="processCreate(' + id +')"> Start the process </a>'); tried so, the button adds, but the event does not work - splincode
  • and what is it? :-) I can say that this code will not work either and processCreate will not run - Grundy

1 answer 1

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.

  1. You need to decide what should be the result: a list of links
  2. 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> 

  • thanks, you are the best) - splincode