Основная проблема, с которой я здесь сталкиваюсь, заключается в том, что у меня есть два элемента div и две директивы, которые практически идентичны. Основное различие между ними состоит в том, что в одной из них большинство переменных были заменены на продукт, а другая - глобальная, потому что в будущем мне нужно будет внести множество косметических изменений.
Глобальная директива и HTML работают точно так же, как и ожидалось. При нажатии кнопки «Закрыть» в этом элементе div все меняется на «display: none», а при нажатии кнопки «Закрыть» в элементе productIncent функция hideProductIncentives () даже не вызывается.
Контроллеры и директивы мешают друг другу?
angular.module('ProductSelectorApp-main')
.directive('getGlobalIncentives', function (myFactory, serverData, $rootScope) {
return {
restrict: 'E',
template: '<button class="slds-button slds-button_brand" ng-click="showGlobalIncentives()">Incentives</button>',
controller: function ($scope, $modal) {
// $scope.selectedCurrency=[{ConversionRate:1.0 ,IsoCode:"USD" }];
$scope.showGlobalIncentives = function() {
document.getElementById('globalIncent').style.display='block';
$scope.isRequestProcessing = false;
}
$scope.hideGlobalIncentives = function() {
document.getElementById('globalIncent').style.display='none';
$scope.isRequestProcessing = false;
}
}
}
});
angular.module('ProductSelectorApp-main')
.directive('getProductIncentives', function (myFactory, serverData, $rootScope) {
return {
restrict: 'E',
template: '<button class="slds-button slds-button_brand" ng-click="showProductIncentives()">Incentives</button>',
controller: function ($scope, $modal) {
this.name='testController';
// $scope.selectedCurrency=[{ConversionRate:1.0 ,IsoCode:"USD" }];
$scope.showProductIncentives = function() {
document.getElementById('productIncent').style.display='block';
$scope.isRequestProcessing = false;
}
$scope.hideProductIncentives = function() {
document.getElementById('productIncent').innerHTML='';
$scope.isRequestProcessing = false;
}
}
}
});
HTML:
<div id="globalIncent" class="white_content">
**<button class="astext" style="float:right;" ng-click="hideGlobalIncentives()">Close</button>**
<table>
<tr>
<th>
<div class="slds-truncate" >Product Name</div>
</th>
</tr>
<tr>
<td style="font-weight: bold; padding:2px;"><div class="slds-truncate" >PBP: </div></td>
<td>
</td>
<td></td>
<td style="font-weight: bold; padding:2px;"><div class="slds-truncate" >RCP</div></td>
<td>
</td>
</tr>
<tr>
<td style="font-weight: bold; padding:2px;"><div class="slds-truncate" >RCP with Incentives: </div></td>
<td>
</td>
<td></td>
<td style="font-weight: bold; padding:2px;"><div class="slds-truncate" >Net Price: </div></td>
<td>
</td>
</tr>
</table>
<div class="slds-border_bottom" style="padding:5px;"></div>
<div class="slds-checkbox" style="float:left;padding-bottom:10px;padding-top:10px;">
<input type="checkbox" name="options" id="CheckUnCheckAll" value="Check" checked="" />
<label class="slds-checkbox__label" for="CheckUnCheckAll">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Check/ UnCheck All</span>
</label>
</div>
<table>
<tr>
<th>Incentive</th>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Global Annual Price Increase" value="Annual Price Increase" checked="" />
<label class="slds-checkbox__label" for="Global Annual Price Increase">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Annual Price Increase</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Global Fund" value="Fund" checked="" />
<label class="slds-checkbox__label" for="Global Fund">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Fund</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Global Multi-Category" value="Multi-Category" checked="" />
<label class="slds-checkbox__label" for="Global Multi-Category">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Multi-Category</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Global Multi Channel" value="Multi Channel" checked="" />
<label class="slds-checkbox__label" for="Global Multi Channel">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Multi Channel</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Global Total Category" value="Total Category" checked="" />
<label class="slds-checkbox__label" for="Global Total Category">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Total Category</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Global Value Add" value="Value Add" checked="" />
<label class="slds-checkbox__label" for="Global Value Add">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Value Add</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Global Additioanl Incentive" value="Additional Incentive" checked="" />
<label class="slds-checkbox__label" for="Global Additioanl Incentive">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Additional Incentive</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
</table>
<div class="slds-border_bottom" style="padding:5px;"></div>
<table>
<tbody>
<tr>
<td>
<div style="display:block">
<div class="slds-truncate" style="float:left; font-weight:bold;">Overall Incentives % </div>
</div>
</td>
<td>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td width="100%">
<div style="float:right;padding:5px;">
<button class="slds-button slds-button_brand">Reset</button>
</div>
<div style="float:right;padding:5px;">
<button class="slds-button slds-button_brand">Apply</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- PRODUCT INCENTIVE DIV-->
<div id="productIncent" class="white_content" ng-controller="testController">
**<button class="astext" style="float:right;" ng-click="hideProductIncentives()" >Close</button>**
<table>
<tr>
<th>
<div class="slds-truncate" >Product Name</div>
</th>
</tr>
<tr>
<td style="font-weight: bold; padding:2px;"><div class="slds-truncate" >PBP: </div></td>
<td>
</td>
<td></td>
<td style="font-weight: bold; padding:2px;"><div class="slds-truncate" >RCP</div></td>
<td>
</td>
</tr>
<tr>
<td style="font-weight: bold; padding:2px;"><div class="slds-truncate" >RCP with Incentives: </div></td>
<td>
</td>
<td></td>
<td style="font-weight: bold; padding:2px;"><div class="slds-truncate" >Net Price: </div></td>
<td>
</td>
</tr>
</table>
<div class="slds-border_bottom" style="padding:5px;"></div>
<div class="slds-checkbox" style="float:left;padding-bottom:10px;padding-top:10px;">
<input type="checkbox" name="options" id="CheckUnCheckAll" value="Check" checked="" />
<label class="slds-checkbox__label" for="CheckUnCheckAll">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Check/ UnCheck All</span>
</label>
</div>
<table>
<tr>
<th>Incentive</th>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Product Annual Price Increase" value="Annual Price Increase" checked="" />
<label class="slds-checkbox__label" for="Product Annual Price Increase">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Annual Price Increase</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Product Fund" value="Fund" checked="" />
<label class="slds-checkbox__label" for="Product Fund">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Fund</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Product Multi-Category" value="Multi-Category" checked="" />
<label class="slds-checkbox__label" for="Product Multi-Category">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Multi-Category</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Product Multi Channel" value="Multi Channel" checked="" />
<label class="slds-checkbox__label" for="Product Multi Channel">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Multi Channel</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Product Total Category" value="Total Category" checked="" />
<label class="slds-checkbox__label" for="Product Total Category">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Total Category</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Product Value Add" value="Value Add" checked="" />
<label class="slds-checkbox__label" for="Product Value Add">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Value Add</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="Product Additioanl Incentive" value="Additional Incentive" checked="" />
<label class="slds-checkbox__label" for="Product Additioanl Incentive">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Additional Incentive</span>
</label>
</div>
</td>
<td>
<div class="slds-select_container" style="float:right">
<select class="slds-select" id="select-01">
<option>%</option>
<option>$</option>
</select>
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
</table>
<div class="slds-border_bottom" style="padding:5px;"></div>
<table>
<tbody>
<tr>
<td>
<div style="display:block">
<div class="slds-truncate" style="float:left; font-weight:bold;">Overall Incentives % </div>
</div>
</td>
<td>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
<div class="slds-form-element__control slds-size--3-of-12" style="float:right;">
<input type="text" id="text-input-id-1" required="" class="slds-input" />
</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td width="100%">
<div style="float:right;padding:5px;">
<button class="slds-button slds-button_brand">Reset</button>
</div>
<div style="float:right;padding:5px;">
<button class="slds-button slds-button_brand">Apply</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>