角度手风琴范围问题

Question

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

/baz=(.*)(?=[^=]*&)/

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

    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);

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

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
  };
});

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

Answer 1

您应该可以从name访问AccordionDemoCtrl媒体资源。因为您的指令在链接函数中有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