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

【问题标题】：Bind a directive's isolated scope to an inner object of the controller's scope将指令的隔离范围绑定到控制器范围的内部对象
【发布时间】：2016-05-28 22:51:02
【问题描述】：

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

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

【问题讨论】：

真的取决于您计划如何使用整个系列的更多信息......或者您是否只打算展示一件物品。例如，在 ng-repeat 中，您已经在重复查询中定义了数组元素实例访问
我实际上将它与 ng-repeat 一起使用。当您说我已经拥有数组元素实例访问权限时，我不明白您的意思。我编辑了我的问题以包含有关我的最终目标的更多信息。

标签： javascript angularjs

【解决方案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'。您想要获得的是控制器中集合的属性。但是，由于隔离范围，该指令无权访问它。在您的第一个示例中，您将指令传递给整个“大卫”对象，这就是它能够访问其属性的原因。你可以对你的收藏做同样的事情：

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

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

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

【讨论】：