尝试访问范围时在 angular-bootstrap 指令中出现问题 - IT屋-程序员软件开发技术分享社区
首页 其他开发 尝试访问范围时在 angular-bootstrap 指令中出现问题
尝试访问范围时在 angular-bootstrap 指令中出现问题
[英] Issue in angular-bootstrap directive while trying to access scope
本文介绍了尝试访问范围时在 angular-bootstrap 指令中出现问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经将 https://github.com/angular-ui/bootstrap 用于手风琴，但是有了这个指令，我遇到了范围问题.如果 ngController 在手风琴内部声明，它只允许使用范围.
请访问以下两个 Plunker 链接，您就会明白我想说什么:
示例 1 :http://plnkr.co/edit/Fb4UauWWmHOnTyjMPFBo
index.html
<html ng-app="plunker"><头><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="样式表"><身体><div ng-controller="AccordionDemoCtrl"><手风琴><accordion-group is-open="status.open"><手风琴标题>手风琴 - 点击我 <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()"/>检查我 </accordion-group></手风琴>
</html>script.js
var app = angular.module('plunker', ['ui.bootstrap']);app.controller('AccordionDemoCtrl', function($scope) {$scope.checkAll = function() {警报($scope.select)；};});示例 2 :http://plnkr.co/edit/ljEMUnTqPBqUyub5eEB7
index.html
<html ng-app="plunker"><头><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="样式表"><身体><手风琴><accordion-group is-open="status.open"><手风琴标题>手风琴 - 点击我 <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()"/>检查我</accordion-group></手风琴></html>
script.js
var app = angular.module('plunker', ['ui.bootstrap']);app.controller('AccordionDemoCtrl', function($scope) {$scope.checkAll = function() {警报($scope.select)；};});
解决方案
我找到了解决方案:
我们可以从函数本身传递值，不需要使用 $scope 访问值.
演示:http://plnkr.co/edit/fZZrDN4e8kbvimR2Wzya
index.html
<html ng-app="plunker"><头><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="样式表"><身体><div ng-controller="AccordionDemoCtrl"><手风琴><accordion-group is-open="status.open"><手风琴标题>手风琴 - 点击我 <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)"/>检查我</accordion-group></手风琴>
</html>
script.js:
var app = angular.module('plunker', ['ui.bootstrap']);app.controller('AccordionDemoCtrl', function($scope) {$scope.checkAll = 函数(选择){警报(选择)；};});
I have used https://github.com/angular-ui/bootstrap for accordion, but with this directive I'm having scope issues. It only allows to use scope if ngController is declared inside of accordion.
Please visit below two Plunker links and you will understand what I'm trying to say:
Example 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);
};
});
Example 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);
};
});
解决方案
I found the solution:
We can pass the value from the function itself, not necessary to access value using $scope.
Demo: 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);
};
});
这篇关于尝试访问范围时在 angular-bootstrap 指令中出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
