我有一个名为模板的指令，模板的代码如下。
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 使用如下 Accordion 。
<!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 中获得该值？
最佳答案
您应该能够从 AccordionDemoCtrl 访问 name 属性。因为你的指令有 scope: false 并且在链接函数中设置了 scope.name ，就像这里的简化演示:JSFiddle .
这是根据您的示例修改的工作演示:Plunker (使用双向绑定(bind))。
解释
The directive accordion doesn't define scope ，所以它的范围是来自外部 Controller 的范围。 transclude:true 使 Angular 为指令 template 创建一个子作用域。但是由于外部 Controller 上的 name 是原始类型，因此在 template 中设置值将在子作用域上创建一个新的 name。查看工作演示:JSFiddle .插图:
如果使用对象而不是基元，它是有效的(JSFiddle)。
更多详情:Understanding Scopes
使用two-way binding似乎更好在指令和外部 Controller 之间进行通信。
这是一个工作演示:Plunker
关于javascript - Angular Accordion 范围的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31586315/