角度如何在html中动态附加变量答案

【问题标题】：angular how to dynamically attach variable inside html角度如何在html中动态附加变量
【发布时间】：2015-11-14 21:43:44
【问题描述】：

我有一个 foreach 循环，在该循环中使用 php 传递三个参数。

这是我的html

<tbody><?php
   foreach($rows as $row):?>
       <tr class="odd gradeA">
            <td><a href="#"><?=$row->firstName?> <?=$row->lastName?></a></td>
            <td><?=$row->address . ' ' . $row->city . ' ' . $row->state . ' ' . $row->zipCode?></td>
            <td><?=$row->email?></td>
            <td><?=$row->cellPhone?></td>
            <td class="text-right tableIcons">
                <a title="Edit User" href="users/edit/<?=$row->userId?>" class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></a>
                <button ng-click="remove(<?=$row->firstName?>, <?=$row->lastName?>, <?=$row->userId?>)" title="Remove User" href="#" class="userRemove btn btn-danger btn-xs"><i class="fa fa-trash"></i></button>
            </td>
       </tr><?php
   endforeach?>
</tbody>

                <!-- begin remove modal -->
            <script type="text/ng-template" id="remove.html">
                <div class="modal-header">
                    <h3 class="modal-title">Are You Sure!</h3>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger m-b-0">
                        <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                        <p>{{firstName}} would be remove.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
                    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
                </div>
            </script>
            <!-- end remove modal -->

当我按下 ng-click 时，我想将 firstName 附加到范围

    $scope.remove = function(firstName, lastName, userId){

    $scope.firstName = firstName;

    var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'remove.html',
        controller: function($scope, $modalInstance){
            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            };
        }
    })

};

问题在于 firstName 没有附加到 remove.html 模式。它没有在 html 中显示名字。

【问题讨论】：

标签： javascript php html angularjs

【解决方案1】：

您需要在移除模型的脚本标签中指定控制器名称：喜欢：

 <!-- begin remove modal -->
        <script type="text/ng-template" id="remove.html" **ng-controller="name of controller where you write remove method code"**>
            <div class="modal-header">
                <h3 class="modal-title">Are You Sure!</h3>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger m-b-0">
                    <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                    <p>{{firstName}} would be remove.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
                <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </script>
        <!-- end remove modal -->

希望能解决。

【讨论】：

谁 html 被包裹在一个控制器中。
多亏了我想我解决了它。我不知道那是不是你想告诉我的，但它有帮助。你我必须在控制器中移动 $scope.firstName ：函数。谢谢

【解决方案2】：

模态 HTML ::

 <!-- begin remove modal -->
    <script type="text/ng-template" id="remove.html" ng-controller="ModalController">
        <div class="modal-header">
            <h3 class="modal-title">Are You Sure!</h3>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger m-b-0">
                <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                <p>{{userData.firstName}} {{userData.lastName}} would be remove.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <!-- end remove modal -->

打开模态：

  $scope.remove = function (firstName, lastName, userId) {
    $scope.firstName = firstName;
    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'remove.html',
      controller: 'ModalController',
      resolve: {
        userData: {
          "firstName": firstName,
          "lastName": lastName,
          "userId": userId
        }
      }
    })
  };

模态控制器：

  angular.module('YOUR_MODULE_NAME').controller('ModalController', ['$scope',
    '$modalInstance',
    'userData',
     function ($scope, $modalInstance, userData) {

      $scope.userData = userData;

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
  }])

我希望这是完整的解决方案。

【讨论】：