Question

我不确定这是一个angularjs错误还是我做错了什么，但是当我使用隔离范围创建指令以及编译函数以编程方式修改模板时，使用了错误的范围。有趣的是，如果我将ng-repeat更改为item in users，这应该不起作用，因为我正在使用隔离范围......它实际上是有效的。更令人困惑的是......这段代码实际上在角1.1.3中正常工作。有谁知道发生了什么？

小提琴：

不适用于角度1.2.3 - http://jsbin.com/iPIbubA/12/edit

按角度1.1.3工作 - http://jsbin.com/iPIbubA/7/edit

使用“用户中的项目”http://jsbin.com/iPIbubA/15/edit

在角度1.2.3中工作

例如：

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

  };

});

Answer 1

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

使用带有隔离范围的指令的编译函数似乎访问了错误的范围

1 个答案: