Question

我正在尝试通过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>

`

Answer 1

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

 ng-controller="TokensCtr"

从服务器返回的数据将放在一个控制器的$ scope变量标记中：ng-click属性所在的数据。这与实例完全分开在标记上有ng-repeat循环。

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

如何使用控制器通过ng-click和Angularjs显示工厂的数据

1 个答案: