Question

所以，我正在尝试将一个模态添加到带有客户列表的页面。当我打开模态时，我需要它来自该特定客户端的data。

当打开另一个寻呼机时，我能够做到这一点，将id发送到网址，但是当我需要使用模态执行此操作时，我无法进行此操作。

这是我到目前为止的代码：注意：如果不尝试从客户端打开特定数据，一切正常。

page.html中

<div class="col-md-6 cli--text">
    <h3>{{client.name}}</h3>
    <p ng-bind-html="client.desc | html"></p>
    <a ng-click="clickToOpen({{client.id}})">More</a>
</div>

app.js

myApp.controller('CliCtrl', function ( $scope, $http, $routeParams, modals, ngDialog) {
    $scope.get_client = function() {
        $http.get("scripts/data/client.json")
        .success( function(data) {
            $scope.pagedclient = data;
        })
        .error(function(data) {
            alert("Something wrong.");
        });
    };

    $scope.clickToOpen = function (data) {
        ngDialog.open({ 
            template: 'scripts/data/modal.html',
            closeByDocument: true,
            closeByEscape: true
        });

        function getById(arr, id) {
            for (var d = 0, len = arr.length; d < len; d += 1) {
                if (arr[d].id === id) {
                    return arr[d];  
                }
            }
        }

        $scope.get_client().then(function(){
            $scope.clients = getById($scope.detRes,data);
        });
        $scope.nameclient = clients.name;
    };

});

modal.html

<div class="modal--body">
    <h2>Modal template</h2>
    <h3>{{nameclient}}</h3>
</div>

我正在使用此modal plugin，但由于我是AngularJS的新手，我不知道该怎么做。

Answer 1

在您正在使用的插件的自述文件中，它表示您可以指定模式将使用的范围变量。因此，请尝试将代码修改为

    ngDialog.open({ 
        template: 'scripts/data/modal.html',
        closeByDocument: true,
        closeByEscape: true,
        scope: $scope
    });

这应该允许你对$ scope.nameclient的模态访问，这将允许正确评估{{nameclient}}。

Answer 2

您可以使用resolve函数将数据传递到模态模板及其控制器：

resolve: {
    myArray: function passArray() {
        return $scope.myArray;
    }
}

检查文档here

Answer 3

我遇到的第一个问题是将id从客户端发送到控制器。我没有使用ng-click="clickToOpen({{client.id}})"，而是在id上使用id="{{client.id}}，而不是ID。然后我只需要获取值并运行函数以通过他的$scope.clickToOpen = function (event) { ngDialog.open({ template: 'scripts/data/modal.html', scope: $scope }); $scope.idCli = (event.target.id); $scope.clients = getById($scope.pagedclient,$scope.idCli); }; function getById(arr, id) { for (var d = 0, len = arr.length; d < len; d += 1) { if (arr[d].id === id) { return arr[d]; } } }过滤客户端并发送到模态插件。

就像@Arafeek说的那样，我不得不使用他的代码来补充这个功能，结果是：

{{clients.name}}

在模态中我只是正常访问数据：@Connect @TestConnectivity public void connect(@ConnectionKey String composedKeyItem1, @ConnectionKey String composedKeyItem2)等......

AngularJS使用数组

3 个答案: