AngularJS =?bind not updating

Question

I've lost my bearings with regards to why I can't pass updates to my directives.

What I'm trying to accomplish with the following piece of code is to be able to set focus on by pressing a button. The problem is however that the "focus" binding on drInput only ever is set when the directive have loaded when it should change whenever it changes in drWrap. How come and how do I get around this?

And now, ladies and gentlemen, I present to you: THE CODE!

<div ng-app="myApp">
  <dr-wrap></dr-wrap>
</div>

var myApp = angular.module('myApp', []);

myApp.directive('drWrap', function($timeout) {
        return {
            scope: {
                focus: '=?bind'
            },
            restrict: 'E',
            replace: 'true',
            template: '<div><button ng-click="openSearch()">focus</button><dr-input focus="focusSearch" /></div>',
            link: function(scope, elem, attr){
                                    scope.openSearch = function(){
                    $timeout(function(){
                        scope.focusSearch = true
                        alert('scope.focusSearch 2 = ' + scope.focusSearch)
                    }, 1000)
                }
            }
        };
    })
        .directive('drInput', function() {
        return {
            scope: {
                focus: '=?bind'
            },
            restrict: 'E',
            replace: 'true',
            template: '<input type="test" focus-me="{{ focus }}" />',
            link: function(scope, elem, attr){
                scope.$watch('focus', function(value){
                        if(value != undefined){
                        scope.focus = value
                        alert('scope.focus = ' + scope.focus)
                    }
                })
            }
        };
    })
    .directive('focusMe', ['$timeout', function ($timeout) {
        return {
            link: function (scope, element, attrs) {
                attrs.$observe('focusMe', function(value){
                    if ((value === true) || (value == 'true')) {
                        $timeout(function () {
                            element[0].focus()
                            scroll(element[0])
                        })
                    } else {
                        element[0].blur()
                    }
                    })
            }
        }
    }])

And the FIDDLE! https://jsfiddle.net/L56rdqLp/168/

I am in front of your jsfiddle but... what do you mean with "The problem is however that the binding only ever is set when the directive have loaded. How come and how do I get around this?" — quirimmo
– quirimmo, Commented Aug 28, 2017 at 17:24

Stanislav Kvitash · Accepted Answer · 2017-08-28 17:40:53Z

3

When you write scope: { focus: '=?bind' }, this means that the attribute name should be bind but not focus, so the template of drWrap should look like:

template: '<div><button ng-click="openSearch()">focus</button><dr-input bind="focusSearch" /></div>'

Add ngBlur event handler to drInput directives input like:

template: '<input type="test" focus-me="{{ focus }}" ng-blur="focus = false"/>',

to change the model to false, when input has lost its focus.

Here is working fiddle.

edited Aug 28, 2017 at 17:40

answered Aug 28, 2017 at 17:35

Stanislav Kvitash

4,63221 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

AngularJS =?bind not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related