CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Val
Val

Reputation: 1033

Angular Directive not updating

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"

Upvotes: 3

Views: 8544

Answers (2)

Praveen Verma
Praveen Verma

Reputation: 144

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>

Upvotes: 0

Praveen Verma
Praveen Verma

Reputation: 144

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

Upvotes: 1

Related Questions