角手风琴范围的问题答案

【问题标题】：Issue with angular accordion scope角手风琴范围的问题
【发布时间】：2015-10-13 16:43:34
【问题描述】：

我有一个名为模板的指令，模板的代码如下所示。

    var templates = function($compile,$parse){
var directive = {
  restrict: 'EA',
  replace: true,
  link: link
};
return directive;

function link(scope, element, attrs) {
 scope.name = "testName";
  var isHtmlCompiled = false;
}
};
 angular.module('templateModules', [])
.directive('templates', templates);

这主要用于编译html代码并显示它。但是为了更好地理解问题，我在示例中没有将它用于此目的。 app.js 文件如下所示

angular.module('ui.bootstrap.demo', ['ui.bootstrap','templateModules']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };

 $scope.add = function(){
     alert($scope.name);
 }

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});

index.html 正在使用如下所示的手风琴。

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
    <script src="app.js"></script>
      <script src="template.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">

  <accordion close-others="oneAtATime">
    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </accordion-group>
  </accordion>
  <accordion close-others="oneAtATime">
       <accordion-group heading="DYnamic" is-open="status.open" is-disabled="status.isFirstDisabled">
      <div templates="something"></div>
  <button ng-click="add()">Add</button>
    </accordion-group>
  </accordion>

</div>
  </body>
</html>

我面临的问题是我无法从 AccordionDemoCtrl 的模板中获取 scope.name 的值。有没有办法在 AccordionDemoCtrl 中获得该值？

【问题讨论】：

你的代码好像不完整，比如launch的定义和另一个指令...你能不能把问题缩小到更少的代码，放到JSFiddle上，等等？
我已经修改了问题

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

您应该能够从AccordionDemoCtrl 访问name 属性。因为你的指令有scope: false并在链接函数中设置scope.name，就像这里的简化演示：JSFiddle。

这是根据您的示例修改的工作演示：Plunker（使用双向绑定）。

解释

The directive accordion doesn't define scope，所以它的作用域是来自外部控制器的。 transclude:true 使 Angular 为指令 template 创建一个子作用域。但是由于外部控制器上的name 是原始类型，因此在template 内设置值将在子作用域上创建一个新的name。请参阅工作演示：JSFiddle。插图：

如果使用对象而不是原语，则它正在工作 (JSFiddle)。

更多详情：Understanding Scopes

使用two-way binding 在指令和外部控制器之间进行通信似乎更好。

这是一个工作演示：Plunker

【讨论】：

我修改了 app.js 以包含你所说的 templateModule。但它仍然显示为未定义。问题在于指令周围的手风琴。否则它将像您的示例一样工作。修改代码以显示已实现的更改
这样，template里面的scope就是accordion上的那个。检查accordion 的定义，看看它的scope 来自哪里。
但我仍然认为它是未定义的。
把你对accordion的定义。你有什么改变？
更改会在问题本身中更新。我已经按照你说的更新了。 “提出手风琴的定义”是什么意思？