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

Question

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

电影评级.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>

电影评级.component.js: setRating使用“&”绑定(bind)。

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 中，由 & 绑定(bind)的表达式不按参数顺序执行。相反，当您执行像这样绑定(bind)的函数时，您必须使用对象来执行它。让我们以您的例子为例，

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

现在，您的movie-rating组件将收到 setRating函数并将其分配给其 Controller 。当您执行$ctrl.setRating()时movieRating里面 Controller ，Angular 希望你向它传递一个像这样的对象

{ movie: 0, value: 0 }

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

所以，当您单击 span 时movie-rating里面，它会调用setRating({ value: $index }) 。它将离开movie undefined ，所以父函数 movieList.setRating将收到参数(undefined, $index) .

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

<小时/>

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

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