javascript 带有角度指令的modalDialog，范围问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28210753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
modalDialog with directive in angular, scope issue
提问by sagar43
I am working with angularjs Directive for a popup.When i use directive single time it works fine but when i use i more then one time it does not work. I don`t get what i am doing wrong.Here is my code.
我正在使用 angularjs 指令进行弹出。当我单次使用指令时它工作正常但是当我使用我超过一次时它不起作用。我不明白我做错了什么。这是我的代码。
HTML
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app='ModalDemo'>
<div ng-controller='MyCtrl'>
<button ng-click='toggleModal()'>Open First Dialog</button>
<button ng-click='toggleModal1()'>Open Second Dialog</button>
<modal-dialog info='modalShown' show='modalShown' width='400px' height='60%'>
<p>Modal Content Goes here<p>
</modal-dialog>
<modal-dialog show='modalShown1' info='modalShown1' width='400px' height='60%'>
<p>2<p>
</modal-dialog>
</div>
</body>
</html>
js
js
app = angular.module('ModalDemo', []);
app.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '=info'
},
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content inside the directive
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
$scope.modalShown1 = false;
$scope.toggleModal1 = function() {
$scope.modalShown1 = !$scope.modalShown1;
};
}]);
Here is sample jsbin
这是示例jsbin
Please help.
请帮忙。
采纳答案by James Waddington
I think it's just this:
我认为只有这样：
<p>Modal Content Goes here<p>
and
和
<p>2<p>
Not closing the tags!
不关闭标签！
<p>Modal Content Goes here</p>
and
和
<p>2</p>
Should fix it: Working jsbin.
应该修复它：工作 jsbin。
回答by codebased
There were couple of problems with the approach. Firstly closing brackets were missing plus your hide was not working.
这种方法存在几个问题。首先右括号丢失加上你的隐藏不起作用。
I have introduced a callback so that you can set the controller level variable as well.
我引入了一个回调，以便您也可以设置控制器级别变量。
Please see here:
请看这里：
