У меня есть модальная директива, которая должна стать видимой при нажатии кнопки. однако значение, определяющее, должно ли модальное быть открытым, которое является двусторонним, связано с директивой, похоже, не обновляется. есть идеи?
вот директива JS:
function modalDialogSelect() {
return {
restrict: 'AE',
scope: {
show: '='
},
replace: true,
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
scope.hideModal = function() {
scope.show = false;
};
},
templateUrl: "./views/directive_templates/select_modal.html"
};
}
директива Внутренний HTML-адрес:
<div class='ng-modal' ng-show='show'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<p>Select New Customer</p>
</div>
</div>
</div>
кнопку, чтобы щелкнуть и открыть модальный:
<button ng-click='selectCustomer = true;'>SELECT/CREATE CUSTOMER</button>
и директива modal-dialog-select в моем общем HTMl
<modal-dialog-select show='selectCustomer'></modal-dialog-select>
любые идеи, почему scope.show не обновляется в моей директиве? Благодарю!
У вас возникла проблема в вашем модальном шаблоне, который
Error: Template must have exactly one root element. was:
<div class='ng-modal' ng-show='show'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<p>Select New Customer</p>
</div>
</div>
</div>
После удаления последнего </div>
все работает.
var app = angular.module("myApp", []);
app.controller('ParentController', function($scope) {
$scope.selectCustomer = false;
});
app.directive('modalDialogSelect', function() {
return {
restrict: 'AE',
scope: {
show: '='
},
replace: true,
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
scope.hideModal = function() {
scope.show = false;
};
},
templateUrl: "modal.html"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ParentController">
<p>Flag is: {{selectCustomer}}</p>
<button ng-click='selectCustomer = !selectCustomer'>SELECT/CREATE CUSTOMER</button>
<modal-dialog-select show='selectCustomer'></modal-dialog-select>
<script type="text/ng-template" id="modal.html">
<div class='ng-modal' ng-show='show'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<p>Select New Customer</p>
</div>
</div>
</script>
</div>
Кажется, отлично работает...
function modalDialogSelect() {
return {
restrict: 'AE',
scope: {
show: '='
},
replace: true,
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><button ng-click='hideModal()'>Here the Modal</button></div>"
};
}
angular.module('test', [])
.controller('testCtrl', function() {})
.directive('modalDialogSelect', modalDialogSelect);
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<div ng-app="test">
<div ng-controller="testCtrl as vm">
<button ng-click='vm.selectCustomer = true;'>SELECT/CREATE CUSTOMER</button>
<modal-dialog-select show='vm.selectCustomer'></modal-dialog-select>
</div>
</div>
Это может быть интересной проблемой передачи javascript по значению, поскольку var является bool. Честно говоря, я плохо объясняю первопричину этого.
Попробуйте передать его как объект
ng-click='selectCustomer.value = true'
Тогда ваше свойство области видимости будет областью scope.show.value.