Question

我使用https://github.com/angular-ui/bootstrap作为手风琴，但是这个指令我有范围问题。如果在accordion中声明了ngController，它只允许使用范围。

请访问以下两个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);
  };
});

Answer 1

我找到了解决方案：

我们可以传递函数本身的值，而无需使用$ 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);
  };
});

Answer 2

这种情况正在发生，因为 Angular Bootstrap 中的scope“directive”accordionGroup为isolated，而$scope为controller“AccordionDemoCtrl”在“require”中使用directive继承。

因此，对于 Example1 ，当您尝试访问$scope AccordionDemoCtrl内的accordian group directive绑定时，可以轻松访问它。但由于select位于local scope的{{1}} accordian group，因此无法在控制器中访问。

因此，对于 Example2 ，当您尝试访问directive内的$scope AccordionDemoCtrl绑定时，它很容易访问，因为控制器位于本地accordian group directive的{{1}}。

请参阅directive to directive Comm。

这是来自 Angular Bootstrap Library for Accordian

的代码

scope

尝试访问范围时在angular-bootstrap指令中出现问题

2 个答案: