我不确定这是 angularjs 错误还是我做错了什么，但是当我使用隔离作用域和编译函数创建指令以编程方式修改模板时，使用了错误的作用域。有趣的是，如果我将 ng-repeat 更改为 item in users，这应该不起作用，因为我使用的是隔离范围......它实际上可以工作。更令人困惑的是……这段代码实际上在 angular 1.1.3 中可以正常工作。有人知道怎么回事吗？
fiddle :
在 Angular 1.2.3 中不工作 - http://jsbin.com/iPIbubA/12/edit
按原样在 Angular 1.1.3 中工作 - http://jsbin.com/iPIbubA/7/edit
使用“用户中的项目”在 Angular 1.2.3 中工作 http://jsbin.com/iPIbubA/15/edit
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Demo Blog</title>
</head>
<body>
<div ng-app="app" class="container">
<h1>Blog Demo</h1>
<div class="row" ng-controller="main">
<collection items="users">
{{ $index + 1 }} - {{ item.name}} / {{ item.email }}
</collection>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</body>
</html>
var app = angular.module('app', [ ]);
app.controller("main", function($scope) {
$scope.users = [
{ name : "bob", email : "bob@aol.com" },
{ name : "joe", email : "joe@aol.com" }
];
});
app.directive("collection", function() {
return {
restrict : "E",
scope : {
"items" : "="
},
compile : function(el, attrs) {
var itemTemplate = el.text();
// if I change ng-repeat to "item in users" it works!
el.html('<ul><li ng-repeat="item in items">' + itemTemplate + '</li></ul>');
}
};
});
最佳答案
使用transclude:
app.directive("collection", function() {
return {
restrict : "E",
scope : {
"items" : "="
},
template : '<ul><li ng-repeat="item in items">
<span ng-transclude></span></li></ul>',
transclude : true
};
});
关于javascript - 将指令的编译函数与隔离范围一起使用似乎访问了错误的范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20344068/