将方法从控制器注入到未使用右变量调用的指令

Inject method from controller to a directive not calling with right variable

本文关键字：变量 调用 指令 未使用 方法 控制器 注入      更新时间：2023-09-26

我正在学习AngularJS，在将方法作为属性"注入"自定义指令时遇到问题

<div ng-controller="LoLImagesController as lolImgCtrl">
    <ul class="list-inline thumbs">
        <li id="champThumb" class="thumbnail" ng-repeat="championName in lolImgCtrl.keysToShow()">
            <champion-thumbnail champion="lolImgCtrl.imageData.champions[championName]" 
                                champion-image="lolImgCtrl.imageData.images[championName]" 
                                champion-info="lolImgCtrl.infoData.champions[championName].info"
                                method="lolImgCtrl.setChampForModal(championName)">
            </champion-thumbnail>
        </li>
    </ul>
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{lolImgCtrl.champForModal}}</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
</div>

正如您所看到的，在第7行中，我试图在champion-thumbnail指令的method属性中放置一个方法。

冠军缩略图.html

<!DOCTYPE html>
<div>
    <div id="champName">
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal"
                data-target="#myModal"
                ng-click="method({championName: '{{champion.key}}'})">
            info
        </button></br>
        <b>{{champion.name}}</b></br>
        {{champion.title | capitalize}}</br>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" style="width: {{championInfo.defense}}0%">
            <span>Defense : {{championInfo.defense}} / 10</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" style="width: {{championInfo.magic}}0%">
            <span>Magic : {{championInfo.magic}} / 10</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{championInfo.difficulty}}0%">
            <span>Difficulty : {{championInfo.difficulty}} / 10</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" style="width: {{championInfo.attack}}0%">
            <span>Attack : {{championInfo.attack}} / 10</span>
        </div>
    </div>
    <img ng-src="{{championImage}}">
</div>

您可以看到，我试图调用在ng-click属性中的指令内部移动的方法。

冠军缩略图指令定义

app.directive('championThumbnail', function () {
    return {
        restrict: 'E',
        scope: { champion: '=', championImage: '=', championInfo: '=', method: '&' },
        templateUrl: 'champion-thumbnail.html'
    };
});

方法转移到指令：setChampForModal

this.setChampForModal = function (champ) {
    $log.debug("set " + champ + " for modal");
    this.champForModal = champ;
};

实际问题

当我检查按钮时，html显示：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" ng-click="method({championName: 'Aatrox'})">info</button>

但当我点击按钮时，模态打开，显示标题{{champion.key}}而不是实际值（在示例中为Aatrox）

我在这里错过了什么？当然，我的最终目标是获得实际值，并用一个控制器包装模态，该控制器将显示我想要的数据，但目前，我希望它在同一个控制器下，但它仍然显示不正确。

p.S：函数有一个$log.debug调用，显示set {{champion.key}} for modal。

编辑：我是AngularJS和webdev的绝对初学者。欢迎任何形式的提示和/或建设性的批评！

我认为问题出在这个上

`<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" ng-click="method({championName: '{{champion.key}}'})">`

ng-click不会将{{champion.key}}解析为其值，而是将其作为字符串。

尝试

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-arget="#myModal" ng-click="method({championName: champion.key})">

而

相关文章：