为啥我不能在angularjs中以两种方式绑定指令组件具有相同的名称？

Posted 2023-02-23

【中文标题】为啥我不能在angularjs中以两种方式绑定指令组件具有相同的名称？

【英文标题】：Why can't I have the same name in two way binding directive components in angularjs?为什么我不能在angularjs中以两种方式绑定指令组件具有相同的名称？

【发布时间】：2021-11-01 03:48:06

【问题描述】：

我有一个指令组件，它在属性中有两种方式绑定。 但是，当属性与属性同名时，它似乎总是未定义。但是当我更改为其他内容时，它会达到我的预期。

组件是这样使用的：

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

有问题的属性是自动播放，它在将其传递给组件的控制器中具有这种结构。

$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"，然后在组件中使用只是更改属性名称，那么它会显示正确的值。

为什么这个简单的改变会奏效？

谢谢

【参考方案1】：

如果您希望范围属性的外部和内部名称相同，只需使用 = 后面没有名称。

scope: 
    ...
    autoplay: "=",
    ...

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

【讨论】：

是的，我知道。您可以在其他道具中看到它。那不是问题。

您的目标是将内部范围属性和公共属性都命名为“自动播放”吗？

是的。我不介意内部名称有另一个名称，但我只是想知道为什么，在这种情况下，当它在内部范围和公共属性中具有相同名称时，它不能像我预期的那样工作。

那么autoplay: "=" 实际上就是解决方案。虽然这是一个有趣的问题，为什么当您手动指定相同的名称时它不起作用，但它既不在这里也不在那里。 AngularJS提供了官方的解决方案，所以使用它。

我已经编辑了这个问题，因为当我也只使用= 时，它也仍然未定义。