角度指令不更新

我在刷新/更新角度指令时遇到问题。基本上有一个标志按钮，将异步调用服务器，如果成功，更改属性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

角度指令不更新

回答

相关问题