Angularjs中函数的参数神奇地匹配？

Question

我是 angualarjs 的新手，刚开始使用 angularjs 1.5 组件构建页面。我试图从复数角度理解以下示例。 angularjs 是否通过部分应用程序/currying 等扩展了 javascript？

movie-rating.component.html： 函数model.setRating() 与属性为value 的对象一起传递。

<span ng-repeat="entry in model.entries track by $index">
    <span ng-click="model.setRating({ value: $index + 1})" class="glyphicon {{entry}}">
    </span>
</span>

movie-rating.component.js： setRating 使用“&”绑定。

module.component("movieRating", {
    templateUrl: "/ps-movies/movie-rating.component.html",
    bindings: {
        value: "<",
        max: "<",
        setRating: "&"
    },

movie-list.component.html： 然而，在使用组件时，set-rating 被分配了一个带有两个 参数model.setRating(movie, value) 的函数？而movie实际上是来自<tr ng-repeat="movie in model.movies">的一个值？但是value?

<tr ng-repeat="movie in model.movies">
    <td>{{movie.title}}</td>
    <td>{{movie.length}}</td>
    <td>
      <movie-rating value="movie.rating" max="5" set-rating="model.setRating(movie, value)">
      </movie-rating>
    </td>

movie-list.component.js： 而在下面的代码model.setRating = function(movie, rating) 中，没有参数可以假定为具有value 属性的对象？

function controller($http) {
    var model = this;
    model.movies = [];

    model.$onInit = function() {
        fetchMovies($http).then(function(movies) { model.movies = movies; });
    };

    model.upRating = function(movie) { if(movie.rating < 5) { movie.rating += 1; } };
    model.downRating = function(movie) { if(movie.rating > 1) { movie.rating -= 1; } };

    model.setRating = function(movie, rating) { // rating is int, and movie is string
        movie.rating = rating;
    };

Answer 1

在 AngularJS 中，& 绑定的表达式不按参数顺序执行。相反，当您执行像这样绑定的函数时，您必须使用对象执行它。以你为例，

<movie-rating set-rating='model.setRating(movie, value)'></movie-rating>

现在，您的movie-rating 组件将接收setRating 函数并将其分配给其控制器。当您在 movieRating 控制器内执行 $ctrl.setRating() 时，Angular 会期望您向它传递一个类似

的对象

{ movie: 0, value: 0 }

然后它将这些值映射到传递给set-rating的字符串中指定的参数顺序；换句话说，Angular 将采用model.setRating(movie, value) 并计算出它实际上需要将movie 键的值从传递的对象传递给第一个参数，并将value 对象传递给第二个参数。

因此，当您在movie-rating 中单击span 时，它将调用setRating({ value: $index })。它将离开movieundefined，因此父函数movieList.setRating将接收参数(undefined, $index)。

请注意，所有这些表达式绑定行为（其中 movie 和 value 在 set-rating 表达式内的名称被保留）仅适用于模板。这就是为什么在 JavaScript 代码中你会看到 Angular 不会崩溃。

---

基本上，当您在模板中的函数绑定中使用值名称时，Angular 将解包传递给函数调用的对象并通过名称匹配参数。它只会对 & 绑定执行此操作，并且仅将 js 对象解压缩到 & 绑定（必须在 HTML 中定义）。它不会将 JS 对象解包为常规 JS 函数（这是有道理的——HTML 绑定不会被破坏，但 JS 变量名会在运行时被破坏；这就是为什么你需要使用 $inject 或数组语法来进行依赖注入角）

如果我能更清楚地解释这一点，请告诉我