Two ways data binding in AngularJS directive

Question

I can not get the two ways data binding working in AngularJS directive.

Here is my html code from the template, used with a basic controller instantiating mymodel (an array here) :

HTML

<select ng-if="mymodel" multipleselect values="mymodel">

DIRECTIVE

I have a directive called multipleselect :

return {
  restrict: 'A',
  scope : {
    values : '='
  },
  link : function($scope, element, attrs){

    ...
    $scope.values = ["some","nice","datas"]; //Actually works, the model is changed in the controller 

    $("select").change(function(){ //This is a callback, asynchronous situation
        $scope.$apply(function () { //Using apply to notify the controller that we are changing its model
          $scope.values = ["some","amazing","datas"]; //Not working :(
        });
    });
   }
}

Why my model is not updated the second time I change it ?

Where did you define your `mymodel` property ? As you're using 2-way binding in your directive, there should be `mymodel` property defined on the scope of the enclosing/parent element of your `multipleselect` directive. — Arkantos, Jan 20 '16 at 13:19
Ive had issues in the past with `ng-if` and such things like this, it will remove the actual element from the DOM and replace it. Don't know if it could be a similar issue. Also just so you know your change will fire for every select on the page. You should use the element object to scope your event to the directive. You should also listen to the destroy to event to remove the handler when it is remove in the `ng-if`. Could cause memory leaks. — ste2425, Jan 20 '16 at 13:24

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

Looking at the answers given I think this will fit your needs without having to use a custom directive:

<select ng-if="mymodel" multiple ng-model="model.mymodel">

Your model will automatically update when the select changes as can be seen here.

The egghead.io video "The Dot" has a really good overview, as does this very popular stack overflow question: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

edited May 23 '17 at 12:07

Community

1
1

answered Jan 20 '16 at 13:31

Martijn Welker

5,575
1
16
26

@ste2425 You should always use a `.` notation when using ng-model, see this fiddle: https://jsfiddle.net/vewk68xt/2/ – Martijn Welker Jan 20 '16 at 13:38
EDIT: Sorry, yea my bad was being daft, – ste2425 Jan 20 '16 at 13:38
@ste2425 Check my response – Martijn Welker Jan 20 '16 at 13:38
Thank you very much it works ! I will look at the sources because for now I really don't understand why it is working – ValentinV Jan 21 '16 at 08:55

Shashank Agrawal · Answer 2 · 2016-01-20T13:38:48.340

0

You don't need to use jQuery to watch for the change. You can write like this (also to fix your problem):

return {
  restrict: 'A',
  scope : {
    values : '='
  },
  link : function($scope, element, attrs){

    $scope.values = ["some","nice","datas"];

    element.on("change", function(){
         $scope.values = ["some","amazing","datas"];
    });
   }
}

edited Jan 20 '16 at 13:38

answered Jan 20 '16 at 13:23

Shashank Agrawal

25,161
11
89
121

Element is a jQuery ( or jQLite if jQuery is not included before angular) object of the directive. – ste2425 Jan 20 '16 at 13:25
Why not use ng-change ? – Martijn Welker Jan 20 '16 at 13:25
1

@MartijnWelker because the directive does not specify a template. You would have to manually compile the html to add the bindings for `ng-change`. – ste2425 Jan 20 '16 at 13:26
It's a – Martijn Welker Jan 20 '16 at 13:28
@MartijnWelker, The author wants to use directive to watch for the change in the directive so using that. – Shashank Agrawal Jan 20 '16 at 13:31
1

@ShashankAgrawal which to me looks like it is because he doesn't fully understand Angular, therefore I've added an Angular example. – Martijn Welker Jan 20 '16 at 13:31
@MartijnWelker I remove some code to be fully understandable, it is not a simple select, in my directive I apply a JQuery function to my select with the library Select2, that's why I need it. Thank you for your comment anyway – ValentinV Jan 21 '16 at 08:58
1

@ValentinV Here's the angular version for Select2, use this instead: https://github.com/angular-ui/ui-select – Martijn Welker Jan 21 '16 at 09:00

Two ways data binding in AngularJS directive

HTML

DIRECTIVE

2 Answers2