Induce controller UI change from within directive with shared variable

Question

So i have a controller which hides/shows part of its template based on value, let's say its something like this:
<div ng-show="isSelected"></div>

...
$scope.isSelected = true;
...

Pretty standard stuff, huh ?

Now, i have a directive to which im passing this flag:
<my-directive select="isSelected"></mydirective>

And in this directive i have it bound like this:

...
// Angular 1.4 syntax here mind you
bindToController: {
    select: '=',
}
...

So in the controller of my directive i change this flag at some point, and i'd like that to be propagated all the way to the parent controller UI which should change.
I checked manually in DevTools that value on the controller is changed by the directive - so thats good.
But i have no idea how to cause UI refresh. It feels like something should be in $watch() or $apply(), but i have no idea if and where should i put something like that.

Alternative solution i used to date was to pass function from controller to my directive which changes this value, after being called - that worked, but it feels like a bad design since it results in more or less same function had to be added each time i want to use directive :/
Any tips will be of course greatly appreciated.

potatopeelings · Accepted Answer · 2015-11-23 11:03:32Z

1

The following bit of code shows a sample of what you are trying to achieve

HTML

<div ng-app="myApp">
    <div ng-controller="myCtrlr">
        <div ng-show="isSelected">If I disappear, the directive is responsible.</div>
        <my-directive select="isSelected"></my-directive>
    </div>
</div>

Javascript

angular.module('myApp', [])
    .controller('myCtrlr', function ($scope) {
        $scope.isSelected = true;
    })
    .directive('myDirective', ['$timeout', function ($timeout) {
        return {
            controller: function () {
                var ctrl = this;
                // the $timeout is just to put the delay in
                $timeout(function () {
                    ctrl.select = false;
                }, 2000)
            },
            controllerAs: 'ctrl',
            bindToController: true,
            scope: {
                select: '=',
            }
        }
    }])

The value of the myCtrlr scope variable select is modified from within the directive (here its done after a delay, but it could be triggered from something like a UI action)

answered Nov 23, 2015 at 11:03

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

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

2 Comments

4rlekin Over a year ago

i realized what i did wrong... i was passing this variable in an object (i presented simplified case obviously), and when i changed $scope.select to $scope.flags = {select: true}` i forgot to change all my ng-shows and stuff to flags.select. Sorry to waste your time for this answer, but here, have some points for your trouble ;)

potatopeelings Over a year ago

Cheers! And Thanks! :-)

Collectives™ on Stack Overflow

Induce controller UI change from within directive with shared variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related