更新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);
}
}]);
使用服務共享應用程序各個部分的數據/方法 – charlietfl
我是新來的角,感謝你給我的例子。 – tarekahf
網上有很多關於在角度使用服務的教程。可能值得通過其中的一些。這是構建角應用的重要部分 – charlietfl