角度指令不更新

我在刷新/更新角度指令時遇到問題。基本上有一個標誌按鈕，將異步調用服務器，如果成功，更改屬性userFlags應禁用該按鈕，並將其文本更改爲「標記...」。角度指令不更新

這裏是指令：

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! "); 
      }); 
     }; 
    } 
}; 
});

這裏是模板：

<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>

有趣的是，改變控制邏輯：

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

原因爲按鈕正確刷新到「已標記...」，但是，ng-d它不會使按鈕失效！在Firebug它表明了NG-disabled屬性設置： NG-禁用= 「真正的」

來源

2013-07-13 Val

你看到錯誤？ 'ngClick'開始一個'$ apply'調用，所以再次從click處理程序中執行這個操作是錯誤的。 –

只需將其更改爲$ scope.item.userFlags = [];郵件（「您的請求已成功！」+ $ scope.item.viewCount）;並刪除範圍應用換行不會刷新該指令，但會出現警報。 – Val

你需要指定爲 '&'

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; 
});

範圍項目和NG-禁用應該有一個像值這是因爲項目的對象是已經存在於控制器

ng-disabled="item.userFlags != null

工作演示在座 http://plnkr.co/edit/zvO24fb082hiyeinWmQi?p=preview

來源

2013-07-13 21:31:37

看演示，其行爲方式改變文本，但按鈕仍然保持啓用，它看起來像Angular忽略ng-disabled屬性，無論出於何種原因 – Val

更新演示 –

謝謝Praveen你真棒！ – Val

HTML頁面：

<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="[email protected]*" 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>

控制器和指令：

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 = []; 
      }; 
});

模板頁面

控制檯

<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>

來源

2013-07-13 22:46:41

角度指令不更新

回答

相關問題