0

我正在尝试使用工厂和控制器通过 ng-click 返回一些数据，我可以看到它，但无法显示它。

这是我的html：`

<div ng-controller="TokensCtrl">
    <a type="button" class="btn" data-toggle="modal" href="#tokens" ng-    click="getTokens(child.ChildId)" >Get Tokens</a>
    </div>`

,

ng-click 应该将数据返回到模态：

`<div id="tokens" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Tokens:</h3>
  </div>
  <div class="modal-body" ng-controller="TokensCtrl">
    <ul ng-repeat='token in tokens'>
      <li>{{token}}</li>
      </ul>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>`

这是工厂：

` 
kindergardenApp.factory('tokens', ['$http', function ($http) {
    var urlBase = '/admin/GetChildTokens';
    var tokens = {};

    tokens.getTokens = function (id) {
        return $http({
            url: urlBase,
            method: 'GET',
            params: {id: id}
        });
    };

    return tokens;
}]);`

和控制器：

`kindergardenApp.controller('TokensCtrl',
    function ($scope, tokens) {
        $scope.token = 'none';
        $scope.status;

        $scope.getTokens = function (id) {
            tokens.getTokens(id)
                .success(function (tokens) {
                    $scope.tokens = tokens;
                })
                .error(function (error) {
                    $scope.status = "Unable to get tokens: " + error.message;
                })
        }
    }
)`

如何让它发挥作用？编辑：它几乎可以工作，我不知道为什么它只返回第一条记录的第一组标记。在控制器中，它传递正确的 ID，它根据 ID 返回正确的令牌，但是当显示时，如果我选择第一个以外的任何其他内容，它什么也不显示。如果我先选择第一个，那么所有其他人都会显示相同的数据。在控制台中它仍然显示正确的数据..

这是现在的 html，直到我让它看起来更漂亮：

`

<div ng-controller="ChildrenCtrl">
    <a class="btn btn-success add" data-toggle="modal" href="#addKid" role="button">Add A Child</a>    
    <table ng-table="tableParams" class="table chldrenadmin">
    <tr ng-repeat="child in $data" ng-class-odd="'odd'">
        <td data-title="'Name'" ng-bind="child.Name" ng-class="name"></td>
        <td data-title="'Age'" ng-bind="3"></td>
        <td data-title="'EGN'" ng-bind="child.EGN"></td>
        <td data-title="'Edit Record'"><input type="button" value="Edit" /></td>
        <td data-title="'Delete'"><div ng-controller="ChildrenDataCtrl"><input type="button" class="removekid" value="Delete" ng-click="deleteKid(child.ChilfdId)" ng-model="child.ChildId"/></div></td>
        <td data-title="'Tokens'">
            <div ng-controller="TokensCtrl"><a href="#tokensModal" type="button" class="btn" data-toggle="modal" ng-click="getTokens(child.ChildId)" ng-model="child.ChildId">Get Tokens{{child.ChildId}}</a>
                <div id="tokensModal" class="modal fade tokens" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3>Tokens:</h3>
                    </div>
                    <div class="modal-body">
                        <ul ng-repeat='token in tokens'>
                            <li><input value={{token}} />{{tokens}}</li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                </div>
            </div>
        </td>

    </tr>
    </table>
</div>

`

4

1 回答 1

0

看起来您已经实例化了 2 个控制器。即在您拥有的两个独立元素上：

 ng-controller="TokensCtr"

您从服务器返回的数据将被放置在一个控制器的 $scope 变量tokens中：ng-click 属性所在的那个。这与在tokens上具有 ng-repeat 循环的实例完全不同。

为了解决这个问题，您可以使用包含按钮和列表的 ng-controller 属性的包装器 div。如果这是不可能的或不合适的，比如它们是否需要位于 DOM 中的不同位置，由其他控制器包装，您可能需要使用服务或事件在控制器之间进行通信。

于 2013-11-11T07:00:02.700 回答