Question

directive('confButton', function () {
            return {
                restrict: 'EA',
                replace: false,
                scope: {
                    modalbtntext: '@',
                    btntext: '@',
                    iconclass: '@',
                    btnclass:'@',
                    callback: '&',
                    disabled: '='


                },
                templateUrl : '/app/scripts/mod/Directives/ConfirmationDirective/ConfrimationDirect.html',
                controller: ['$scope', '$element', '$attrs', '$transclude', 'modalService',
                    function ($scope, $element, $attsr, $transclude, modalService) {

                        $scope.open = function () {
                            console.log($scope.disabled);
                            var bodyMessage = '';
                            if ($scope.modalbtntext.toLowerCase() == "edit") {
                                bodyMessage = "Are you sure you want to edit this ?"
                            }
                            else{
                                bodyMessage = 'Are you sure you want to delete this customer?'

                            }
                            var modalOptions = {
                                closeButtonText: 'Cancel',
                                actionButtonText: $scope.modalbtntext,
                                headerText: 'Please Confirm your Request',
                                bodyText: bodyMessage
                            };

                            modalService.showModal({}, modalOptions).then(function (result) {
                                $scope.callback();
                            });
                        }

                    }]



            }
        });

这是我的Tempalte

<button class="{{btnclass}}" ng-disabled="{{disabled}}"  ng-click="open()"><i class="{{iconclass}}"></i> {{btntext}} </button>

这是指令

的实现

 <conf-button modalbtntext="Delete"
                             disabled="gridOptions.selectedItems.length == 0" 
                             btntext="Delete Selected" 
                             btnclass="btn btn-default hidden-xs"
                             iconclass ="glyphicon glyphicon-trash"
                             callback="deleteCity()">

                </conf-button>

关键是我想在按钮中实现双向绑定..默认情况下它被禁用，因为没有选择项目..但是当我选择任何项目时它仍然被禁用。在这种情况下如何实现双向绑定？

Answer 1

要使双向绑定工作，您需要将其绑定到对象。会发生什么是在表达式评估期间将值绑定到基元，因此绑定不会更新。

您可以使用$watch更新某个值。

.controller('someCtrl', function($scope){
 $scope.gridOption.selectedItems = [];

 $scope.$watch(function(){
  //Watch for these changes
  return $scope.gridOptions.selectedItems.length == 0;
 }, function(newVal){
  //Change will trigger this callback function with the new value
  $scope.btnDisabled = newVal;
 });
});

HTML标记：

<conf-button modalbtntext="Delete"
                             disabled="btnDisabled" 
                             btntext="Delete Selected" 
                             btnclass="btn btn-default hidden-xs"
                             iconclass ="glyphicon glyphicon-trash"
                             callback="deleteCity()">
</conf-button>

如何在AngularJS隔离范围内进行双向绑定？

1 个答案: