问题：下面是我使用带有模态弹出窗口的角度数据库js的代码，由于某种原因，模态弹出窗口可以打开和关闭。 我尝试设置范围选项，似乎没有任何工作。另有线 事情就是当我在chrome中加载开发工具并进行调试时，它将启动 工作。在后续刷新时它不会。有人能帮我吗 出？
<head>
<title>System Check Page</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.js"></script>
<script type="text/javascript" src="js/angular-datatables.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('showcase.angularWay.withOptions', ['datatables', 'ngResource']);
app.controller('AngularWayWithOptionsCtrl', function ($resource, $scope, $http, DTOptionsBuilder, DTColumnDefBuilder) {
var vm = this;
vm.clients = [];
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(10);
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(4).notSortable(),
DTColumnDefBuilder.newColumnDef(5).notSortable(),
DTColumnDefBuilder.newColumnDef(6).notSortable()
];
$resource('SystemCheck/GetClientConfigDetails').query().$promise.then(function (clients) {
vm.clients = clients;
});
$scope.showModal = false;
$scope.toggleModal = function () {
$scope.showModal = !$scope.showModal;
};
$scope.EtimeDBUP = function (response) {
$http.get('SystemCheck/GetEtimeDbStatus/' + response.Coid).then(function (etimeResponse) {
$scope.EtimeDBResponse = "For " + response.CustomerId + ":" + etimeResponse.data.processMessages[0].userMessage.codeValue;
if (etimeResponse.data.processMessages[0].userMessage.messageTxt == "200") {
$scope.class = "btn-success";
}
else {
$scope.class = "btn-danger";
}
$scope.showModal = !$scope.showModal;
});
};
$scope.EtimeXMLUP = function (response) {
$http.get('SystemCheck/GetEtimeXMLStatus/' + response.Coid).then(function (etimeResponse) {
$scope.EtimeDBResponse = "For " + response.CustomerId + ":" + etimeResponse.data.processMessages[0].userMessage.codeValue; $scope.EtimeDBResponse = "for " + response.Coid + ":" + etimeResponse.data.processMessages[0].userMessage.codeValue;
if (etimeResponse.data.processMessages[0].userMessage.messageTxt == "200") {
$scope.class = "btn-success";
}
else {
$scope.class = "btn-danger";
}
$scope.showModal = !$scope.showModal;
});
};
});
app.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function (scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function (value) {
if (value == true) {
$(element).modal('show');
}
else {
$(element).modal('hide');
}
});
$(element).on("close", function () {
scope.$parent[attrs.visible] = true;
});
$(element).on('shown.bs.modal', function () {
scope.$apply(function () {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
</script>
</head>
<body ng-app="showcase.angularWay.withOptions">
<div ng-controller="AngularWayWithOptionsCtrl as showCase">
<h1 style="font-weight: bolder; font-style: oblique; font-family: sans-serif; margin-bottom: 15px; margin-top: 4px">Mobile System Check</h1>
<table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
<thead>
<tr>
<th style="text-align: left">COID</th>
<th style="text-align: left">CUSTID</th>
<th style="text-align: left">ETIMEML</th>
<th style="text-align: left">PAYROLLPRODUCT</th>
<th style="text-align: left">ETIMEDBUP</th>
<th style="text-align: left">ETIMEXML</th>
<th style="text-align: left">INSTANCE RESTART</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in showCase.clients">
<td>{{client.Coid}}</td>
<td>{{client.CustomerId}}</td>
<td>{{client.EtimeUrl}}</td>
<td>{{client.PayRollProduct}}</td>
<td>
<button class="btn btn-info" ng-click="EtimeDBUP(client)">EtimeDBUP</button></td>
<td>
<button class="btn btn-info" ng-click="EtimeXMLUP(client)">ETIMEXMLUP</button></td>
<td>
<button class="btn btn-warning">INSTANCE RESTART</button></td>
</tr>
</tbody>
</table>
<modal title="Result" visible="showModal">
<div ng-class="class" class="well">{{EtimeDBResponse}}</div>
</modal>
</div>
</body>
答案 0 :(得分：0)
我不肯定我确切地知道你的意思。我不认为你可以在角度上全局关闭孤立的范围。
但是对于指令，您不会在指令函数返回的对象中包含scope属性。
注意你的模态指令
scope: true
删除此行。通常，范围将是一个初始化新隔离范围的对象，该范围仅查找显式传递给它的内容。