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

Question

我是 angualarjs 的新手，刚开始使用 angularjs 1.5 组件构建页面。我试图从 pluralsight 理解以下示例。 angularjs 是否使用部分 application/currying 和其他部分扩展了 javascript？

电影-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>

电影-rating.component.js: setRating 使用“&”绑定。

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

电影-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>

电影-list.component.js: 而在下面的代码model.setRating = function(movie, rating)中，没有参数假设一个对象属性 of 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 })。它会留下 movie undefined，所以父函数 movieList.setRating 将接收参数 (undefined, $index).

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

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

中的依赖注入

让我知道是否可以解释得更清楚

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

The parameters of functions magically match up in Angularjs?

javascript

angularjs

angularjs-components