Angularjs Custom Directive not changing DOM

Question

Use ng-if in Angularjs Directive

I have a showTaskDetailView$ stream that I can subscribe to and I can push a boolean value through it.

angular.module('Project').directive('something', () => {
    return {
        restrict: 'E',
        template: '<div>something: {{toggleValue}}</div>',
        replace: true,
        link() {
            something();
            function something() {
                showTaskDetailView$.subscribe(value => {
                    let toggleValue = value;
                    console.log(toggleValue);
                });
            }
        }
    };
});

When I run this directive and I change the showTaskDetailView$ value I see the new value in my console.log. But nothing is happening in the DOM.

Because toggleValue is a local variable inside the context of the subscribe callback. — Igor
– Igor, Commented May 24, 2019 at 19:30
Okay that makes sense. Any suggestions how to make the toggleValue available outside subscribe? — Peter Boomsma
– Peter Boomsma, Commented May 24, 2019 at 19:36
Use a component with a controller. See AngularJS Developer Guide - components. — georgeawg
– georgeawg, Commented May 24, 2019 at 20:57
I see that you have 29 Angular 2+ questions. Is it possible you are trying to solve an Angular 2+ problem? The example in your question is AngularJS. AngularJS directives and components do not work with Angular 2+. — georgeawg
– georgeawg, Commented May 24, 2019 at 21:10

amarmishra · Accepted Answer · 2019-05-28 04:56:54Z

0

Your toggleValue is a local variable and not binded to $scope. For DOM to update you need to add toggelValue on $scope.

Change your link function to:

link(scope) {
        something();
        function something() {
            showTaskDetailView$.subscribe(value => {
                scope.toggleValue = value; <-------------
                console.log(scope.toggleValue);
            });
        }
    }

Now you should see the updated DOM. Read more here:

answered May 28, 2019 at 4:56

amarmishra

6136 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs Custom Directive not changing DOM

Use ng-if in Angularjs Directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Use ng-if in Angularjs Directive

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related