Angular Directive not updating

Question

I am having an issue refreshing/updating an angular directive. Basically there is a Flag button which will make an async call to server and if it's successful, change the property userFlags which should disable the button and change it's text to "Flagged...".

Here is the directive:

app.directive('flagable', function() {
return {
    restrict: 'E',
    scope: { item: '=' },
    templateUrl: '/Content/templates/flagable.tmpl',
    controller: function($scope) {
        $scope.flag = function () {

            $scope.$apply(function () {
                // ITS NOT GOING IN HERE!
                //AJAX CALL HERE
                model.$modelValue.userFlags = [];
                Messenger().post("Your request has succeded! ");
            });
        };
    }
};
});

Here is the template:

<div class="btn-group pull-right">
<button class="btn btn-small btn-danger" ng-disabled="{{item.userFlags != null}}"><i class="icon-flag"></i>
  <any ng-switch="item.userFlags==null">
    <any ng-switch-when="true">Flag</any>
    <any ng-switch-when="false">Flagged...</any>
  </any>
</button>
<button class="btn btn-small btn-danger dropdown-toggle" data-toggle="dropdown" ng-disabled="{{item.userFlags != null}}"><span class="caret"></span></button>
<ul class="dropdown-menu">
    <li><a href="#" ng-click="flag()">Inappropriate</a></li>
    <li><a href="#" ng-click="flag()">Overpost</a></li>
    <li><a href="#" ng-click="flag()">Spam</a></li>
</ul>
  </div>

Interestingly enough, changing the controller logic to:

 $scope.flag = function () {
 $scope.item.userFlags = [];
 Messenger().post("Your request has succeded! " + $scope.item.viewCount);
 };

Causes for the button to refresh properly to "Flagged..." however, the ng-disabled its not making the button disabled! In firebug its showing that the ng-disabled property is set: ng-disabled="true"

Are you seeing errors in the console? ngClick starts an $apply call, so it's an error to do so again from within the click handler. — Michelle Tilley
– Michelle Tilley, Commented Jul 13, 2013 at 18:23
Just changing it to $scope.item.userFlags = []; Messenger().post("Your request has succeded! " + $scope.item.viewCount); and removing the scope apply wrap doesn't refresh the directive, however the alert appears. — Val
– Val, Commented Jul 13, 2013 at 18:33

Praveen Verma · Accepted Answer · 2013-07-13 22:20:40Z

1

you need to assign scope item as '&'

var app = angular.module('app', []);
app.directive('flagable', function() {
return {
    restrict: 'E',
    scope: { item: '&' },
    templateUrl: 'flagable.tmpl',
    controller: function($scope) {
           $scope.flag = function()
           {
             $scope.item.userFlags = [];
           };
        }
    };
});

app.controller('appController', function($scope){
          $scope.item ={};
          //$scope.item.userFlags = null;
});

and ng-disable should have value like this because item object is already present in controller

ng-disabled="item.userFlags != null

Working demo present here http://plnkr.co/edit/zvO24fb082hiyeinWmQi?p=preview

edited Jul 13, 2013 at 22:20

answered Jul 13, 2013 at 21:31

Praveen Verma

1442 silver badges10 bronze badges

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

2 Comments

Val Over a year ago

Looking at the demo, its behaving the same way changing the text but the button still remains enabled, it looks like Angular is ignoring the ng-disabled property for whatever reason

Praveen Verma Over a year ago

Wait a mins whatever i did is also not 100% correct. your custom control should be free from scope paramters and you should pass parameter from view <flagable item="item" flag="flag(item)"></flagable> Updated the demo again. plnkr.co/edit/zvO24fb082hiyeinWmQi?p=preview

Praveen Verma · Accepted Answer · 2013-07-13 22:46:41Z

HTML PAGE:

<html ng-app="app">

  <head>
    <link data-require="[email protected]" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="[email protected]" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="appController">
    <h1>Hello Plunker!</h1>
    <flagable item="item" flag="flag(item)"></flagable>
  </body>

</html>

Controller and directive:

var app = angular.module('app', []);
app.directive('flagable', function() {
return {
    restrict: 'E',
    scope: { item: '=', flag: '&' },
    templateUrl: 'flagable.tmpl'
    };
});

app.controller('appController', function($scope){
           $scope.item ={};
           $scope.flag = function(item)
           {
             //call service to set flag here
             item.userFlags = [];
           };
});

template page

<div class="btn-group pull-right">
<button class="btn btn-small btn-danger" ng-disabled="item.userFlags != null"><i class="icon-flag"></i>
  <any ng-switch="item.userFlags==null">
    <any ng-switch-when="true">Flag</any>
    <any ng-switch-when="false">Flagged...</any>
  </any>
</button>
<button class="btn btn-small btn-danger dropdown-toggle" data-toggle="dropdown" ng-disabled="item.userFlags != null"><span class="caret"></span></button>
<ul class="dropdown-menu">
    <li><a href="#" ng-click="flag()">Inappropriate</a></li>
    <li><a href="#" ng-click="flag()">Overpost</a></li>
    <li><a href="#" ng-click="flag()">Spam</a></li>
</ul>
</div>

Collectives™ on Stack Overflow

Angular Directive not updating

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related