Directive does not receive value

Asked

Viewed 59 times

0

I have this directive:

        app.directive('mensagem', function($timeout, $rootScope){
        return {
            restrict: 'E',
            scope: {
                msg: '='
            },
            template: '<div ng-show="animate && msg" class="alert alert-success animate-show animate-hide" ng-bind="msg"></div>',
            link: function(scope, elem, attrs){
                scope.animate = true;
                $timeout(function(){
                    scope.animate = false;
                    scope.msg = undefined;              
                },1500);
            }
        }
    })

I have a controller called 'Artigoscontroller' with a 'save' method'.

            $scope.salvaArtigo = function(){
            $http.post(url+'artigo', $scope.artigo).then(function(data){
                if(data.data.sucesso){
                    $rootScope.mensagem = data.data.mensagem;
                    $scope.artigo = {};
                    $state.go('dash');
                }
            })
        }

I also have another controller called 'Listartigoscontroler', with a method to enable or disable an article.

            $scope.ativarArtigo = function(artigo){
            $http.post(url+'remover-artigo/'+artigo.id).then(function(data){
                if(data.data.sucesso){
                    $rootScope.mensagem = data.data.mensagem;
                    $scope.listaArtigos();
                }
            });
        }

And finally, my html with the directive is like this:

<mensagem msg="mensagem"></mensagem>

When I save the article, the server message usually appears in the directive, but when I go on/off no message appears. I put it in html {{message}} and it looks normal, but the value is not passing to the directive. If I put something like $rootScope.message = 'test' out of the on/off method, then yes it passes the value.

javascript angularjs

  • It may be that the Angular was lost in the $digest him... put this code right below the "list()".. if ($scope.$$phase === null) {&#xA; $scope.$apply();&#xA; }

  • I put, but it didn’t work no, still not showing the message :(

1 answer

0

I solved the problem. The solution was to put $watch inside the directive, thus staying:

        app.directive('mensagem', function($timeout, $rootScope, $compile){
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                msg: '='
            },
            template: '<div ng-show="animate && msg" class="alert alert-success animate-show animate-hide" ng-bind="msg"></div>',
            link: function(scope, elem, attrs){
                scope.animate = true;
                $timeout(function(){
                    scope.$watch('msg', function(newVal, oldVal){
                        console.log(scope.msg);
                    }, true);

                },1500);
            }
        }
    })

Browser other questions tagged javascript angularjs

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