Question

我遇到刷新/更新角度指令的问题。基本上有一个Flag按钮，它将对服务器进行异步调用，如果成功，则更改属性userFlags，该属性应该禁用该按钮并将其文本更改为“Flagged ...”。

这是指令：

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 - 禁止按钮禁用按钮！在firebug中显示ng-disabled属性已设置： NG-禁用= “真”

Answer 1

您需要将范围项目指定为“＆amp;”

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-disable应该具有这样的值，因为项目对象已经存在于控制器

中

ng-disabled="item.userFlags != null

这里有工作演示 http://plnkr.co/edit/zvO24fb082hiyeinWmQi?p=preview

Answer 2

HTML PAGE：

<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="angular.js@1.1.5" 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="bootstrap@2.3.2" 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>

Angular Directive不更新

2 个答案: