我用过https://github.com/angular-ui/bootstrap对于 Accordion ，但有了这个指令我遇到了范围问题。仅当 ngController 在 Accordion 内部声明时才允许使用作用域。
请访问下面两个 Plunker 链接，您就会明白我想说的:
示例 1:http://plnkr.co/edit/Fb4UauWWmHOnTyjMPFBo
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<accordion>
<accordion-group is-open="status.open">
<accordion-heading>
Accordian - Click me <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<div>
<input type="checkbox" ng-model="select" ng-click="checkAll()" /> Check me
</div>
</accordion-group>
</accordion>
</div>
</body>
</html>
script.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function($scope) {
$scope.checkAll = function() {
alert($scope.select);
};
});
示例 2:http://plnkr.co/edit/ljEMUnTqPBqUyub5eEB7
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<accordion>
<accordion-group is-open="status.open">
<accordion-heading>
Accordian - Click me <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<div ng-controller="AccordionDemoCtrl">
<input type="checkbox" ng-model="select" ng-click="checkAll()" /> Check me
</div>
</accordion-group>
</accordion>
</body>
</html>
script.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function($scope) {
$scope.checkAll = function() {
alert($scope.select);
};
});
最佳答案
我找到了解决方案:
我们可以从函数本身传递值，而不需要使用 $scope 访问值。
演示:http://plnkr.co/edit/fZZrDN4e8kbvimR2Wzya
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<accordion>
<accordion-group is-open="status.open">
<accordion-heading>
Accordian - Click me <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<div>
<input type="checkbox" ng-model="select" ng-click="checkAll(select)" /> Check me
</div>
</accordion-group>
</accordion>
</div>
</body>
</html>
script.js:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function($scope) {
$scope.checkAll = function (select) {
alert(select);
};
});
关于angularjs - 尝试访问范围时出现 Angular-bootstrap 指令问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32604689/