Angularjs two way data binding on ng-repeat with directive

Question

What I am trying to achieve: trigger an angular js directive on a jquery ui event which in turn calls a method in the controller, which adds a value in an array which should appear in the view because of the two way data binding.

What does not work: the value is properly added in the array but the view is not updated

HTML

<li id="collection_{{$index+1}}" class="collection" ng-repeat="collection in column | filter:avoidUndefined" ng-controller="collectionController" ng-model="collection">
    <h1 class="collection-title"> {{ collection.title }}</h1>
    <ul class="bookmarks sortable droppable" droppable=".draggable" sortable=".bookmarks.sortable">
        <li class="bookmark" ng-repeat="bookmark in collection.bookmarks">
            <a class="bookmark-link bookmark-{{bookmark.id}}" href="{{bookmark.url}}">{{bookmark.title}}</a>
        </li>
    </ul>
</li>

DIRECTIVE

directives.directive('droppable',function(){
  return {
    link:function(scope,el,attrs){
        el.droppable({
            accept: attrs.droppable,
            drop: function( event, ui ) {            
                var url = $(ui.helper).text();
                scope.addBookmark(null, url, url);
                $(this).removeClass('ui-state-highlight');
            },
...

CONTROLLER

$scope.addBookmark = function (id, title, url){
    if (id == null) {
        ...
    }
    var bookmark = {
        'id': id,
        'title': title,
        'url': url,
        'type': 'bookmark'
    };
    $scope.collection.bookmarks.push(bookmark);
};

$scope.collection.bookmarks is updated properly but the view stays the same. If I call the same addBookmark function directly with a normal button it works.

have you tried putting a scope.$apply(); at the end of your link function? — z.a.
– z.a., Commented May 11, 2014 at 14:49
Your directive is doing something it should not... Directives Should not call controller methods — Dalorzo
– Dalorzo, Commented May 11, 2014 at 15:04
@MirkoGuarnier I would say that it solves your problem. However it is not right way to do it. — Dalorzo
– Dalorzo, Commented May 11, 2014 at 15:48
So what would be a proper way ? should I use $emit instead of calling directly a function ? — stilllife
– stilllife, Commented May 11, 2014 at 15:49

Jan · Accepted Answer · 2014-05-11 14:50:48Z

1

You forgot to wrap your drop-callback in $apply:

directives.directive('droppable',function(){
  return {
    link:function(scope,el,attrs){
        el.droppable({
            accept: attrs.droppable,
            drop: function( event, ui ) {            
                scope.$apply(function(scope){
                    var url = $(ui.helper).text();
                    scope.addBookmark(null, url, url);
                    $(this).removeClass('ui-state-highlight');
                });
            },
...

answered May 11, 2014 at 14:50

Jan

1,0209 silver badges14 bronze badges

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

1 Comment

stilllife Over a year ago

It works, and I put $(this).removeClass('ui-state-highlight') outside scope.$apply

Dalorzo · Accepted Answer · 2014-05-11 16:00:56Z

0

My recommendation is to use $emit instead of calling a method of the controller directly in your directive.

Directives should be always independent components, if inside the directive there is a call to a method from a controller(outside the directive) this will create a dependency between my directive and the controller and of course this will force one not being able to exist without the other.

If I would have to apply a design principle to a directive it will be the S in SOLID, Single responsibility principle. Directives should be able to encapsulate and work independently.

I would probably try this on my directive: scope.$emit("UrlChanged", url);

Something like this:

directives.directive('droppable',function(){
  return {
    link:function(scope,el,attrs){
        el.droppable({
            accept: attrs.droppable,
            drop: function( event, ui ) {            
                    var url = $(ui.helper).text();
                    scope.$emit("UrlChanged", url);
                    $(this).removeClass('ui-state-highlight');

            },

On my controller:

$scope.$on("UrlChanged", function(event, url){
   ... //your has changed.    
});

edited May 11, 2014 at 16:00

answered May 11, 2014 at 15:55

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

2 Comments

stilllife Over a year ago

Despite I like this recommendation, in this way I am back to the initial problem. Should I wrap your $emit inside a scope.$apply ?

stilllife Over a year ago

Without $apply the view is not updated, only the model

Collectives™ on Stack Overflow

Angularjs two way data binding on ng-repeat with directive

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related