2016-09-15 19 views
0

更新1:我研究了@charlietfl建議的角度服務。根據我的發現,我已經改寫了這個問題,並澄清了細節。查看下面的代碼部分和快照以獲取更多詳細信息。如何實現角度控制器的多個實例,並允許其他控制器查詢每個實例的狀態

我已經定義了一個控制器app.controller('sig-pad', ...),它將被用來控制這個控制器的兩個實例,它們是評估者和監督者的數字簽名。簽名使用密碼簽名並鎖定時,必須禁用某些字段,具體取決於哪個簽名被鎖定;評估師或主管。這些字段屬於不同的其他控制器,其中一些可能存在於簽名控制器本身中。

說出如果用戶簽署表單並輸入密碼來鎖定簽名,則應禁用當前頁面中的某些字段。我能夠使用<fieldset ng-disabled="isSigned()">在當前控制器ng-controller="sig-pad"內的字段上實現此功能。

最初,我正在尋找一種方法來調用示波器功能$scope.isSigned()從另一個控制器定義了簽名控制器。但是,如果不使用服務,這似乎是不可能的。

該頁面在主體元素<body ng-app="myApp" ng-controller="mainController" ... >上有一個主控制器app.controller('mainController', ...),它可以訪問所有字段。此外,mainController內,我已經定義了"sig-pad"控制器的兩個實例:

<div class="signature-wrapper" ng-controller="sig-pad as appraiserSignature"> 
          <h4>Appraiser Signature</h4>... 

<div class="signature-wrapper" ng-controller="sig-pad as supervisorSignature"> 
          <h4>Supervisor Signature</h4>... 

我想現在要做的,是定義密碼加密,解密和簽名鎖定一個名爲「signatureLocking」的共享服務,並在簽名控制器(評估者和主管)和主控制器中重用此服務。

現在最後一個問題:是否可以創建兩個相同簽名控制器的實例,使用共享服務signatureLocking,但是卻能夠識別哪個簽名被鎖定:評估者或主管?然後,能夠使用主控制器的服務以及簽名控制器來確定哪個簽名被鎖定,以便我可以相應地禁用相關字段。

感謝您的反饋和建議。

<div class="signature-wrapper" ng-controller="sig-pad"> 
          <h4>Appraiser Signature</h4> 
          <div id='signature-pad' class="m-signature-pad break" > 
           <div class="m-signature-pad--body" > 
            <canvas redraw ng-signature-pad="signature" ng-hide="isSigned()"></canvas> 
            <img ng-src="{{isSigned()?signature.toDataURL():''}}" ng-hide="!isSigned()"> 
            <input id="appraiser_signature" name="appraiser_signature" type="hidden" ng-value="singatureB64()"/> 
           </div> 
           <div class="m-signature-pad--footer"> 
            <div class="description">Sign above</div> 
            <!-- <button type="button" class="button clear" data-action="clear">Clear</button> --> 
            <!-- <button type="button" class="button save" data-action="save">Save</button> -->    
            <a class="btn clear" ng-click="clear()" ng-disabled="isSigned()">Clear</a> 
            <a class="btn save" ng-click="sendData($event)" ng-disabled="isSigned()">Sign</a> 
            <p ng-hide="true">Signature Result: {{signatureResult.result}}</p> 
           </div> 
          </div> 
          <div class="break signature-details" > 
           <div class='signature-password'> 
            <fieldset ng-disabled="false"> 
            <label for="app_password1">Appraiser Password:</label> 
            <input type="password" id="app_password1" name="app_password1" ng-blur="appPassword1Exit('appraiser')" ng-model="password1"/> 
            </fieldset> 
            <br> 
            <input type="password" id="app_password2" name="app_password2" ng-model="password2" ng-hide="true"/> 
           </div> 
           <fieldset ng-disabled="isSigned()">       
            <label for="id_appraiser_name">Name:</label><input id="id_appraiser_name" name="id_appraiser_name" type="text" ng-value="appraiser_name" ng-readonly="true"/> 
            <br> 
            <label for="appraiser_designation">Designation:</label> 
             <select id="appraiser_designation" name="appraiser_designation"> 
               <option value=""></option> 
               <option value="AACI">AACI</option> 
               <option value="CANDIDATE">CANDIDATE</option> 
               <option value="CRA">CRA</option> 
               <option value="1">DAC</option> 
               <option value="0">DAR</option> 
               <option value="E.A.">E.A.</option> 
               <option value="Other ...">Other ...</option> 
             </select> 
            <br> 
            <label for="app_aic_member_number">Member #:</label> 
            <input type="text" name="app_aic_member_number" id="app_aic_member_number" ng-model="app_aic_member_number"/> 
            <br> 
            <div class='row' ng-controller="datePickerController"> 
             <!-- <input type="text" id="date_signed_appraiser" name="date_signed_appraiser"> --> 
             <label for="date_signed_appraiser" class="col-xs-3 col-form-label vcenter">DATE SIGNED:</label> 
             <div class="col-xs-4 input-group vcenter"> 
              <input id="date_signed_appraiser" name="date_signed_appraiser" type="text" 
               class="form-control" uib-datepicker-popup="{{format}}" ng-model="date_signed_appraiser" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> 
              <span class="input-group-btn"> 
               <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
              </span> 
             </div> 
            </div> 
            <div class='row' ng-controller="datePickerController"> 
             <label for="appraiser_date_inspection" class="col-xs-3 col-form-label vcenter">Date of Inspection:</label> 
             <div class="col-xs-4 input-group vcenter"> 
              <input type="text" id="appraiser_date_inspection" name="appraiser_date_inspection" 
               class="form-control" uib-datepicker-popup="{{format}}" ng-model="date_signed_appraiser" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats"> 
              <span class="input-group-btn"> 
               <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
              </span> 
             </div> 
            </div>         
            <br> 
            <label for="appraiser_license_info">LICENSE INFO (where applicable):</label> 
            <input id="appraiser_license_info" name="appraiser_license_info" type="text"> 
            <br> 
            <label>NOTE: For this appraisal to be valid, an original or a password protected digital signature is required.</label> 
           </fieldset> 
          </div> 
         </div> 

控制器:

app.controller('sig-pad', ['$scope', '$http', '$rootScope', function ($scope, $http, $rootScope) { 

$scope.appPassword1Exit = function (userRole) { 
     //debugger; 
     var pwd; 
     if (!$scope.isSigned() && $scope.password1) { 
      $scope.password2 = $rootScope.encrypt($scope.password1, $scope.singatureB64()); 
      alert('Form is now locked. Please remember the password \'' + $scope.password1 + '\''); 
      $scope.password1 = null; 
     } else if ($scope.password1 && $scope.isSigned()) { 
      pwd = $rootScope.decrypt($scope.password2, $scope.singatureB64()); 
      console.log('decrypt pwd = ', pwd); 
      if ($scope.password1 === pwd) { 
       $scope.password1 = null; 
       $scope.password2 = null; 
       alert('Password is correct, the form will be unlocked.') 
      } else { 
       alert("Sorry, incorrect password."); 
       $scope.password1 = null; 
      } 
     } 
    $scope.isSigned = function() { 
     if (!$scope.password2) { 
      $scope.password2 = null; 
     } 
     return ($scope.password2 !== null); 
    } 
}]); 

enter image description here

+0

使用服務共享應用程序各個部分的數據/方法 – charlietfl

+0

我是新來的角,感謝你給我的例子。 – tarekahf

+0

網上有很多關於在角度使用服務的教程。可能值得通過其中的一些。這是構建角應用的重要部分 – charlietfl

回答

0

我相信我找到了解決辦法,但是,需要進一步的改進,以優化它。以下是詳細內容:

定義服務:signatureLocking

app.factory('signatureLocking', function($rootScope) { 
    var theService = {}; 
    theService.signatureStatus = {}; 
    theService.userRoles = {}; 
    theService.userRoles.APPRAISER = 'appraiser'; 
    theService.userRoles.SUPERVISOR = 'supervisor'; 

    theService.password1Exit = function (userRole, $scope) { 
     //debugger; 
     var pwd; 
     if (!$scope.isSigned() && $scope.password1) { 
      $scope.password2 = theService.encrypt($scope.password1, $scope.singatureB64()); 
      alert('Form is now locked. Please remember the password \'' + $scope.password1 + '\''); 
      $scope.password1 = null; 
     } else if ($scope.password1 && $scope.isSigned()) { 
      pwd = theService.decrypt($scope.password2, $scope.singatureB64()); 
      console.log('decrypt pwd = ', pwd); 
      if ($scope.password1 === pwd) { 
       $scope.password1 = null; 
       $scope.password2 = null; 
       alert('Password is correct, the form will be unlocked.') 
      } else { 
       alert("Sorry, incorrect password."); 
       $scope.password1 = null; 
      } 
     } 
     theService.signatureStatus[userRole] = $scope.isSigned; 
     //console.log('Password1Exit - userRole = ', userRole); 
    } 


    theService.isAppraiserSigned = function() { 
     var appraiser = theService.userRoles.APPRAISER; 
     //debugger; 
     if (theService.signatureStatus[appraiser] === undefined) { 
      theService.signatureStatus[appraiser] = function(){ return false }; 
     } 
     return theService.signatureStatus[appraiser](); 
    } 
    return theService; 
}) 

定義主控制器:

app.controller('mainController', ['$scope', '$timeout', '$rootScope', 'signatureLocking', function($scope, $timeout, $rootScope, signatureLocking) { 
    $scope.redrawCanvas = function() { 
     //console.log('redrawCanvas'); 
     var triggerResize = function() { 
      //console.log('inside trigger resize function'); 
      $scope.$broadcast('resize::resize') 
     }; 
     $timeout(triggerResize, 250); 
    } 
    $scope.appraiser_name = ""; 
    $scope.isAppraiserSigned = signatureLocking.isAppraiserSigned; 
}]); 

定義簽名控制器:

app.controller('sig-pad', ['$scope', '$http', '$rootScope', 'signatureLocking', function ($scope, $http, $rootScope, signatureLocking) { 
    $scope.isSigned = function() { 
     if (!$scope.password2) { 
      $scope.password2 = null; 
     } 
     return ($scope.password2 !== null); 
    } 
    $scope.password1Exit = function (userRole) { 
     signatureLocking.password1Exit(userRole, $scope); 
     //debugger; 
     console.log('password1Exit - Signature Status for role', userRole, signatureLocking.signatureStatus[userRole]()); 
    } 
    $scope.isAppraiserSigned = signatureLocking.isAppraiserSigned; 
}]); 

下面的HTML將觸發簽名控制器內的密碼鎖定:

<input type="password" id="app_password1" name="app_password1" ng-blur="password1Exit('appraiser')" ng-model="password1" ng-init="password1Exit('appraiser')"/> 

然後簡單地說,使用該服務的任何控制器signatureLocking您可以使用下面的HTML獲取說鑑定人簽名的狀態和禁用領域相應

<fieldset ng-disabled="isAppraiserSigned()">        
    <label for="id_appraiser_name">Name:</label><input id="id_appraiser_name" name="id_appraiser_name" type="text" ng-value="appraiser_name" ng-readonly="true"/> 
    <br> 
    <label for="app_aic_member_number">Member #:</label> 
    <input type="text" name="app_aic_member_number" id="app_aic_member_number" ng-model="app_aic_member_number"/> 
    ... 
    ... 
</fieldset> 

我有唯一的問題這種解決方案有以下幾種:

  • 的函數來獲得該簽名狀態使用在簽名CON限定的範圍的函數的引用troller

  • 我將$scope變量從控制器傳遞給服務,是嗎?

  • 我使用userRole參數的硬編碼值來觸發密碼鎖定ng-blur="password1Exit('appraiser')" ng-init="password1Exit('appraiser')"用於評估人簽名。

如果您有任何想法來改進解決方案,請讓我知道。

相關問題