Insert into HTML and with Angularjs functions

Asked

Viewed 843 times

1

People have problems when I insert one HTML containing a module ng, and when I click to run nothing happens. See 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 from a ENTER, it sends to the ng-submit="create($event)" and executing the insertion of the HTML, the problem is the button that has the function ng-click="remove($event)" and does not perform.

angularjs

2 answers

2


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();
    };
};

  • +1. I remember when I had struggled to discover this :\

  • I liked it when you said $compile, but I noticed in the research that it is applied in a directive and not in the controller, when I executed the changes happened this mistake: Error: [ng:areq] Argument 'scope' is required

  • @iLeonardoCarvalho Correto, I forgot to add a parameter to the end. Reply corrected, thank you for mentioning the error!

  • It worked properly, now the ngis recognized, but it is correct I insert a HTML in the controller or some examples talking to insert into directive? 'Cause I can see how to convert this controller for a directive but I want to apply to good programming practices.

  • 1

    @iLeonardoCarvalho If you are a Unit of work well defined, worth isolating in a directive. If not, don’t worry about it so much; one of the controller’s assignments is to coordinate the content display.

  • @Onosendai I will check this subject addressed, in this scenario is only the insertion of a HTML and the removal of the element built by a ui-router and modularizing the code using the browserify, I believe that it is still too little for a complex system but thank you for pointing out the article.

Show 1 more comment

0

I think we’re missing one $scope.$apply at the end of the function, without it will not pass in the $digest angular, and therefore ng-* are not recognized.

Take a look at the section of $Digest() which 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();
};

  • I’ll check the Angular documents on the $digest(), but when I executed it returns to me like this: Error: [$rootScope:inprog] $apply already in progress, should declare $apply in controller function?

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.