Snip : 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.
That's probably because you don't have a 'linkText' on the controller scope in the directive......
You don't need the nested quotes in the attribute.
Can't tell from your code why the 'IsNew' isn't been interpreted correctly - but I'd guess it's because it's not in the $scope
>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......
