Insert in HTML and with AngularJS functions

Question

Insert in HTML and with AngularJS functions

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

People with problem when I enter a HTML that contains a ng module, and when I click to execute nothing happens. See the Code:

//HomeCtrl.js
module.exports = function($scope) {
    // Create Note
    $scope.create = function(e) {
        var value = $scope.inputNote,
            $element = $(e.target).closest('.task-container').find('.tasks-list');

        $element.prepend(
            ' <li class="task-item"> '
                + '<div class="task-check">'
                    + '<label>'
                        + '<input type="checkbox">'
                        + '<span class="text"></span>'
                    + '</label>'
                + '</div>'
                + '<div class="task-state">'
                    + '<span class="label label-orange">ATIVA</span>'
                + '</div>'
                + '<div class="task-time">'
                    + '<a class="btn btn-sm btn-danger" href="#!" ng-click="remove($event)"><i class="fa fa-trash"></i> Remover</a>'
                + '</div>'
                + '<div class="task-body">'+ value +'</div>'
            + '</li>'
            );
    };
    // Button Remove
    $scope.remove = function(e) {
        var $element = $(e.target).closest('li');
        $element.remove();
    };
};

When I type in a input and an ENTER, it sends to ng-submit="create($event)" and executing the insertion of HTML , the problem is button that has the ng-click="remove($event)" function and does not execute.

angularjs

asked by anonymous 11.09.2016 / 20:14

2 answers

0

I think it's missing a $scope.$apply at the end of the function, otherwise it will not pass in $digest of angular, so ng- * are not recognized.

Take a look at the $ digest () section that is where you start talking about it.

$scope.create = function(e) {
    var value = $scope.inputNote,
        $element = $(e.target).closest('.task-container').find('.tasks-list');

    $element.prepend(
        ' <li class="task-item"> '
            + '<div class="task-check">'
                + '<label>'
                    + '<input type="checkbox">'
                    + '<span class="text"></span>'
                + '</label>'
            + '</div>'
            + '<div class="task-state">'
                + '<span class="label label-orange">ATIVA</span>'
            + '</div>'
            + '<div class="task-time">'
                + '<a class="btn btn-sm btn-danger" href="#!" ng-click="remove($event)"><i class="fa fa-trash"></i> Remover</a>'
            + '</div>'
            + '<div class="task-body">'+ value +'</div>'
        + '</li>'
        );
    $scope.$apply();
};

12.09.2016 / 15:32

What is the difference between element and this in jQuery function $ .each Limit the number of characters in a select HTML / CSS / JS field

score 2 · Accepted Answer

You need to compile HTML so that it is recognized by Angular. Example:

//HomeCtrl.js
module.exports = function($scope, $compile) {
    // Create Note
    $scope.create = function(e) {
        var value = $scope.inputNote,
            $element = $(e.target).closest('.task-container').find('.tasks-list');

        $element.prepend($compile( // Compila o bloco a seguir pelo Angular
            ' <li class="task-item"> '
                + '<div class="task-check">'
                    + '<label>'
                        + '<input type="checkbox">'
                        + '<span class="text"></span>'
                    + '</label>'
                + '</div>'
                + '<div class="task-state">'
                    + '<span class="label label-orange">ATIVA</span>'
                + '</div>'
                + '<div class="task-time">'
                    + '<a class="btn btn-sm btn-danger" href="#!" ng-click="remove($event)"><i class="fa fa-trash"></i> Remover</a>'
                + '</div>'
                + '<div class="task-body">'+ value +'</div>'
            + '</li>'
            )($scope));
    };
    // Button Remove
    $scope.remove = function(e) {
        var $element = $(e.target).closest('li');
        $element.remove();
    };
};