angularjs directive two way binding does'nt work

Question

Hello I'm having trouble with two way binding between my controller and my directive.

This is the Html

<map-brands brands="brands" focused-brands="focusedBrands" add-brand-input="addBrandInput" suggestions="suggestions" open-brand-tab="openBrandTab(data)" remove-brand="removeBrand(data)" brands-boolean="brandsBoolean" brand-arrow="brandArrow(data)" add-brand-input-change="addBrandInputChange(data)" add-the-brand="addTheBrand(data)" add-brand-iterator="addBrandIterator"> 

        </map-brands>

This is the Directive

scope:{
            "suggestions": '=?',
            "brands": '=?',
            "focusedBrands": '=?',
            "addBrandInput": '=?',
            "removeBrand": "&",
            "openBrandTab": "&",
            "brandsBoolean": "=?",
            "brandArrow": "&",
            "addBrandInputChange": "&",
            "addTheBrand": "&",
            "addBrandIterator":"=?"
             },
    templateUrl: '/views/directives/mapBrands.html'

This is the Js function with the problem:

$scope.addTheBrand = function(data){                                
        $scope.addBrandInput = 'SomeText';
        console.log("$scope.addBrandInput",$scope.addBrandInput);           

};

And finally the template:

<div class="brands-add-container" ng-if="brandsBoolean">
            <input type="text" class="brandsAdd" ng-keydown="brandArrow({data:$event})" ng-model="addBrandInput" placeholder="ADD BRAND(S)" ng-change="addBrandInputChange({data:addBrandInput})" />
            <span class="listOfSuggestions" ng-if="addBrandInput != '' ">
                <span class="suggestion"  ng-repeat="(key, value) in suggestions" ng-click="addTheBrand({data:value})" ng-class="{'activeBrand' : addBrandIterator == key}"> {{value}} </span>
            </span>
        </div>

The problem is when i type some text in the INPUT and afterwards i click the ng-click (located in the last span), The input text is not changing according to the addTheBrand function.

---In the console.log i have placed the addBrandInput is changed to "someText" but not in the input.

--- I've tried a simple example in CodePen using Directives and an controller function, it worked...

Could it be a problem in the project's structure? If so, where should i look for the problem?

@Angular_10 As i said, this exaple does work, codepen.io/Alexjfishman/pen/ZpjXvq — Alex
– Alex, Commented Oct 14, 2016 at 14:22

Karim · Accepted Answer · 2016-10-14 14:08:03Z

2

Objects are passed by reference while primitive types (string, number and boolean) are passed by value. The variable addBrandInput is a string, you should change it to a reference type, otherwise two way binding won't work

$scope.addTheBrand = function(data){                                
       $scope.addBrandInput = {
         label: 'SomeText'
       }
       console.log("$scope.addBrandInput",$scope.addBrandInput);           

};

answered Oct 14, 2016 at 14:08

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

3 Comments

Karim Over a year ago

i'm glad i helped you, i'd appreciate if you give me +1 :)

Alex Over a year ago

sorry but i cant i give +1 :(

Karim Over a year ago

don't worry, no problem ;)

Collectives™ on Stack Overflow

angularjs directive two way binding does'nt work

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related