Question

我正在学习AngularJS，而且我在注射＆＃39;＆＃39;自定义指令作为属性的方法

<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行，我尝试在method指令的champion-thumbnail属性中放置一个方法。

冠军-thumbnail.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属性中调用在指令内移动的方法。

champion-thumbnail指令定义

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。任何形式的小费和/或建设性的批评都是受欢迎的！

Answer 1

我认为问题是这个

`<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})">

代替

从控制器注入方法到不使用正确变量调用的指令

实际问题

1 个答案: