3

angular ディレクティブの更新/更新で問題が発生しています。基本的に、サーバーへの非同期呼び出しを行うフラグボタンがあり、成功した場合は、ボタンを無効にし、テキストを「フラグ付き...」に変更するプロパティ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-disabled はボタンを無効にしません! firebug では、ng-disabled プロパティが設定されていることを示しています: ng-disabled="true"

4

2 に答える 2

1

スコープ項目を「&」として割り当てる必要があります

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

item オブジェクトがコントローラーに既に存在するため、ng-disable はこのような値を持つ必要があります。

ng-disabled="item.userFlags != null

ここに動作デモがあります http://plnkr.co/edit/zvO24fb082hiyeinWmQi?p=preview

于 2013-07-13T21:31:37.363 に答える
0

HTML ページ: 

<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>
于 2013-07-13T22:46:41.197 に答える