<a ng-click="click()" ng-disabled="disableAction" class="btn btn-default ng-isolate-scope" confirm-title="Confirm Clear" confirm-message="'Are you sure you want to clear all e-messages?'" ok-label="Yes" cancel-label="No" link-text="Clear E-Messages" disable-action="{{disableClearMessage}}" ok-action="clearEMessage()">{{ linkText }}</a>So, the directive didn't work and the disable-action didn't get evaluated.
(function () { 'use strict'; // <confirm-button class="btn btn-default" confirm-title="Please confirm" link-text="Release Lock" // confirm-message="{{canUseAFunction()}}" ok-label="Yes" ok-action="releaseLock(currentItemTree.node_id)" cancel-label="Cancel"></confirm-button> var app = angular.module('sysMgrApp'); app.directive('confirmButton', [function() { return { restrict: 'AE', transclude: true, replace: true, scope: { linkText: '@', okLabel: '@', cancelLabel: '@?', confirmTitle: '@', confirmMessage: '=', onOpen: '&', okAction: '&', disableAction: '=' }, controller: ['$scope', '$modal', function($scope, $modal) { $scope.okClass = 'btn-danger'; $scope.message = $scope.confirmMessage; $scope.title = $scope.confirmTitle; // $scope.okLabel = $scope.okLabel; // console.log('Before: ' + $scope.cancelLabel); $scope.cancelLabel = $scope.cancelLabel || 'Cancel'; // console.log('After: ' + $scope.cancelLabel); console.log('DisableAction: ' + $scope.disableAction); $scope.click = function () { if ($scope.onOpen) { $scope.onOpen(); } var modal = $modal.open({ scope: $scope, templateUrl: '/app/templates/modal.html' }); modal.result.then(function (result) { $scope.okAction(); }); }; }], template: '<a ng-click="click()" ng-disabled="disableAction" >{{ linkText }}</a>' }; }]); })();Here is my current markup in the form which is partial view called from another form:
<ng-form name="editEMsgForm"> <div class="form-horizontal"> <div class="padd"> <div class="form-group"> <data-confirm:button class="btn btn-default" confirm-title="Confirm Clear" confirm-message="'Are you sure you want to clear all e-messages?'" ok-label="Yes" cancel-label="No" link-text="Clear E-Messages" disable-action ="{{disableClearMessage}}" ok-action="clearEMessage()"></data-confirm:button> <div class="col-lg-9"> <textarea name="eMessage" rows="18" class="form-control" readonly id="eMessage" ng-model="currentOperator.eMessage"></textarea> </div> </div> </div> </div> </ng-form>In the controller's code I have now the following:
app.controller('operatorsCrudController', ['$scope', '$rootScope', '$modal', '$timeout', '$stateParams', '$state', 'operatorsService', function ($scope, $rootScope, $modal, $timeout, $stateParams, $state, operatorsService) { var init = function() { $scope.showForm = false; $scope.disableAction = false; $scope.isEditLoading = false; $scope.disableClearMessage = false; load($stateParams.id); };and I am setting this variable to correct value (true or false) down in the code that is executed on new or load.