Hi Viv,

I made a few changes and somehow now I see very weird result.

Here is our current directive - I added okLabel and CancelLabel properties into the code (originally there was no CancelLabel code and okLabel was commented out)

(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;
                $scope.cancelLabel = (!cancelLabel) ? cancelLabel : 'Cancel';

                $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>'
        };
    }]);
    
})();

I also made a small change in the modal.html file

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" ng-click="$dismiss()" aria-hidden="true">×</button>
    <h4 class="modal-title">{{ title }}</h4>
</div>
<div class="modal-body">
    <div class="alert alert-warning fade in">
        <i class="icon-warning-sign icon-2x"></i>
        {{ message }}
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-default"  data-dismiss="modal" aria-hidden="true" ng-click="$dismiss()">{{cancelLabel}}</button>
    <button class="btn" ng-class="okClass" id="btnConfirmDelete" ng-click="$close(true)">{{ okLabel }}</button>
</div>

The only change here is that I added {{cancelLabel}} instead of just the original word 'Cancel'

In my form I have this code

<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'"
                                     ok-action="clearEMessage(currentOperator)"></data-confirm:button>
                <div class="controls">
                    <div class="col-lg-9">
                        <textarea name="eMessage" rows="8" class="form-control" readonly
                                  id="eMessage" ng-model="currentOperator.EMessage"></textarea>
                    </div>
                </div>

            </div>
        </div>
    </div>

</ng-form>

This form is actually a tab in a bigger form which is the following:

@model SysManager.Web.Areas.Operators.Models.EditOperatorViewModel
<div ng-class="{'col-md-7': $parent.showSearch, 'col-md-11': !$parent.showSearch}">

	@Html.Partial("_EditFormHeader")

	<form name="form" novalidate role="form" sm-dirty-check server-error ng-hide="!showForm" class="ng-cloak">
		<div class="widget" data-resize:container>
			<div class="widget-head">
				Operator : {{ currentOperator.FirstName + ' ' + currentOperator.LastName }} {{ !isNew ? '(' + currentOperator.OpCode + ')' : '' }}
				<switch class="pull-right" label-on="Hidden" label-off="Visible" checked="currentOperator.hidden" form="form"></switch>
			</div>
			
            <div class="widget-content">
                <div class="scrollable widget-resize">
                    <div class="ng-load-indicator" ng-show="isEditLoading"></div>
                    <div class="padd">
                        @Html.Partial("_EditFormAlerts")
                    </div>
                    <div class="col-lg-3 col-md-3 panel-container">
                        <ul class="nav nav-pills nav-stacked">
                            <li class="active"><a data-toggle="pill" href="#general" ng-class="{true: 'invalid-tab', false: ''}[form.editGeneralForm.$invalid]">General</a></li>
                            <li><a data-toggle="pill" href="#eMsg" ng-class="{true: 'invalid-tab', false: ''}[form.editEMsgForm.$invalid]">E-Messages</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-9 col-md-9 panel-container">
                        <div class="tab-content">
                            <div class="tab-pane active" id="general">
                                @Html.Partial("EditOperatorGeneral")
                            </div>
                            <div class="tab-pane" id="eMsg">
                                @Html.Partial("EditOperatorEMessages")
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="widget-foot">
                <div ng-show="!isNew">
                    <button class="btn btn-primary" ng-click="save(currentOperator)" ng-disabled="form.$invalid || disableAction">Save</button>
                    <data-delete:button title="{{ 'Delete Operator ' + currentOperator.OpCode }}"
                                        message="Are you sure you want to delete this operator?"
                                        disable-action="disableAction"
                                        delete="delete()">
                    </data-delete:button>
                    <data-cancel:button title="Cancel"
                                        message="You have unsaved changes. Are you sure you want to navigate away from this page?"
                                        cancel="cancel()"
                                        disable-action="disableAction"
                                        dirty="form.$dirty">
                    </data-cancel:button>
                </div>
                <div ng-show="isNew">
                    <button id="btnAdd" class="btn btn-primary" ng-click="new(currentOperator)" ng-disabled="form.$invalid || disableAction">Add</button>
                    <data-cancel:button title="Cancel"
                                        message="You have unsaved changes. Are you sure you want to navigate away from this page?"
                                        cancel="cancel()"
                                        disable-action="disableAction"
                                        dirty="form.$dirty">
                    </data-cancel:button>
                </div>
            </div>
			
		</div>
	</form>
</div>

-----------------
Now, here is the weird part:

The form displays both Add/Cancel and Save/Delete/Cancel although it only should display one set of the buttons. All other forms seem to be correct.

I think there is some sort of the incorrect placement of div tags which is causing wrong behavior, but I can not figure this out so far. Also, the top portion of the form is not displayed correctly either.

In addition, instead of the text for the linkText I see {{linkText}} on the button caption. Although I am going to re-test now after I added single quotes around the text.



>>Hi everybody,
>>
>>Just want to confirm if the syntax I use is correct or not.
>>
>>I want to use the following code
>>
>>

>>$scope.cancelLabel = (!cancelLabel) ? cancelLabel : 'Cancel';

>>
>>which translates into:
>>
>>if cancelLabel is not empty, use cancelLabel otherwise set it to 'Cancel'.
>>
>>First I want to verify if the test for not empty as !cancelLabel is correct and secondly, if IIF in JavaScript is written the way I did.
>
>Should be OK if you know that 'cancelLabel' has been declared and is a string. If not see 'ToBoolean' here: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
>
>>Thanks in advance.
>>
>>Also, the disableAction doesn't seem to work for me using this syntax:
>>
>>

>><data-confirm:button class="btn btn-default" confirm-title="Confirm Clear" 
>>                                link-text="Clear E-Messages"
>>                                     confirm-message="'Are you sure you want to clear all e-messages?'" 
>>                                     ok-label="Yes" 
>>                                     cancel-label="No"
>>                                     disable-action ="currentOperator.EMessage"
>>                                     ok-action="clearEMessage(currentOperator)"></data-confirm:button>

>>
>>I want to disable the button if the eMessage is empty.
>
>Since I don't know what 'disable-action' is it's a bit hard to answer. Is this an angular thing? Seems odd to be passing a string.
>
>P.S Haven't had a change to look at your tabbing problem yet......