为什么我不能在angularjs中的双向绑定指令组件中使用相同的名称？

Question

我有一个在属性中有双向绑定的指令组件。但是，当属性与属性同名时，它似乎总是未定义的。但当我换成其他东西时，它会做我所期望的事情。

该组件的用法如下：

<div class="col-sm-4" ng-if="relatedContentsRandom">
          <related-content related-content="relatedContentsRandom" content-id="selectedVideoId"
            in-watch-later="inWatchLater" autoplay="autoplay" is-watch-list="isWatchList" />
</div>

有问题的属性是autoplay，它在将其传递到组件的控制器中具有此结构。

$scope.autoplay = {
      selected: false,
      count: 0,
    };

和组件的一部分：

scope: {
        relatedContent: "<",
        contentId: "<",
        inWatchLater: "<",
        autoplay: "=autoplay", // or autoplay: "="
        isWatchList: "<"
      },
      link: function (scope, element, attributes) {
        _init();

        function _init() {
          console.log(scope.autoplay);
          console.log(scope.relatedContent);
        }
...

如果我将组件中的属性更改为使用不同的名称，如autoplay: "=atp"，然后在组件中仅更改属性名称，则它会显示正确的值。

为什么这个简单的改变是有效的？

谢谢

Answer 1

如果您希望作用域属性的外部名称和内部名称相同，则只需在后面使用不带名称的=。

scope: {
    ...
    autoplay: "=",
    ...
}

下面是相关的AngularJS文档：https://docs.angularjs.org/api/ng/service/$compile#-scope-