Question

如果我从指令的函数返回以下内容：

return {
    scope: {
        sometag: "="
    },
    link: link
}

我将指令设置如下：

<div myDirective sometag="david"> </div>

我的控制器中有这一行：

$scope.david = {firstName: "david", lastName: "McGee"};

然后从指令的链接功能我能够做到这一点：

console.log(scope.sometag.firstName + " " + scope.sometag.lastName);

但是，如果我的控制器中有一个集合，可能是这样的：

$scope.movies = {
    aNewHope: { title: "A New Hope", rating: 4},
    theEmpire: { title: "The Empire Strikes Back", rating: 5},
    returnOfJedi: { title: "Return of the Jedi", rating: 3}
}

我想把我的指示指向该集合中的一部电影，这样如果我的指令在其链接函数中有这个：

console.log(scope.movie.title + " has rating of " + scope.movie.rating);

这是孤立的范围：

return {
    scope: {
        movie: "="
    }
}

我正是这样设置的：

<div myDirective movie="aNewHope"> </div>

然后以下内容将出现在控制台中：

A New Hope has rating of 4

也许更简单地说，我如何在控制器的范围内走一步，这样我就可以在指令的隔离范围内访问它？

为了使事情更清楚，我的完整意图如下：

我所指的集合是来自服务器的答案。然后我使用ng-repeat填充列表。我还想将该事件的每个项目绑定到一个click事件，该事件将使用movieID（上述集合中的键）查询有关该电影的更多数据。所以我想要告诉ng-repeat重复<li>元素，我会告诉它重复一个<my-directive>元素，然后我将从那里绑定click事件。我只需要一种方法告诉我的指令我发送给函数的参数。我希望函数在控制器的范围内执行，而不是从指令执行。

Answer 1

当你写这个

<div myDirective movie="aNewHope"> </div>

'aNewHope'指的是控制器中$ scope对象的（不存在）属性。

console.log(scope.movie) // -> undefined

由于您尝试为指令的隔离范围指定属性名称，因此需要将其作为字符串传递。

有两种不同的方法可以做到这一点。

（1）通过Angular表达式

<div myDirective movie="{{ "aNewHope" }}"> </div>

或（2）变量“movieTitle”设置为电影的键作为字符串

$scope.movieTitle = "aNewHope"

<div myDirective movie="movieTitle"> </div>

但是，这样做会导致在控制台中获得以下输出：

undefined has rating of undefined

正如您可能已经猜到的那样，那是因为'scope.movie'现在设置为字符串，并且它没有属性'name'或'rating'。你想要得到的是控制器中集合的属性。但是，由于隔离范围，该指令无法访问它。在您的第一个示例中，您将指令传递给整个'david'对象，这就是它能够访问它的属性的原因。你可以对你的收藏品做同样的事情：

<div myDirective movies="movies" movie="movieTitle"> </div>

现在可以从隔离范围访问该集合。然后，您可以使用方括号从变量中获取对象的属性。

console.log(scope.movies[movie].title + " has rating of " + scope.movies[movie].title);

将指令的隔离范围绑定到控制器范围的内部对象

1 个答案: