Question

我是angualarjs的新手，刚开始使用angularjs 1.5组件构建页面。我试图从pluralsight了解以下示例。 angularjs是否通过部分应用/ 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使用“＆amp;”绑定。

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

电影list.component.html： 但是，在使用该组件时，会为set-rating分配一个带有两个参数model.setRating(movie, value)的函数？电影实际上是<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)中，没有参数假设属性为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功能并将其分配给其控制器。当你在$ctrl.setRating()控制器内部执行movieRating时，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)。

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

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

如果我能解释清楚

，请告诉我

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

1 个答案: