Question

您好我正在设计一个HTML页面：

<div ng-controller="AppController">
        <div class="container">
            <div class="row">
                <div id='cssmenu'>
                    <ul>
                        <li class='active'><a href='#'><span>Home</span></a></li>
                        <li class='has-sub'>
                            <a href='#'><span>Simulink</span></a>
                            <ul>
                                <li><a href='#' data-ng-click='bind("Scope")'><span>Scope</span></a></li>
                                <li class='last'><a href='#' data-ng-click='bind("XY Graph")'><span>XY Graph</span></a></li>
                            </ul>
                        </li>
                        <li class='has-sub'>
                            <a href='#'><span>Communications</span></a>
                            <ul>
                                <li><a href='#' data-ng-click='bind("Constellation diagram")'><span>Constellation diagram</span></a></li>
                                <li class='last'><a href='#' data-ng-click='bind("Eye diagram")'><span>Eye diagram</span></a></li>
                            </ul>
                        </li>
                        <li class='has-sub'>
                            <a href='#'><span>DSP</span></a>
                            <ul>
                                <li><a href='#' data-ng-click='bind("Matrix viewer")'><span>Matrix viewer</span></a></li>
                                <li><a href='#' data-ng-click='bind("Spectrum Analyser")'><span>Spectrum Analyser</span></a></li>
                                <li class='last'><a href='#' data-ng-click='bind("Waterfall")'><span>Waterfall</span></a></li>
                            </ul>
                        </li>
                        <li class='last'><a href='#' ng-click="add()"><span>Attach to Model</span></a></li>
                    </ul>
                </div>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Product Name</th>
                            <th>Product Type</th>
                            <th>Product ID</th>
                            <th>&nbsp;</th>
                        </tr>
                        <tr>
                            <th><input ng-model="newProduct.productName" class="form-control" /></th>
                            <th><input ng-model="newProduct.productId" class="form-control" /></th>
                            <th><input ng-model="newProduct.productPrice" class="form-control" /></th>
                            <th>
                                <button ng-click="update()" class="btn btn-success">Update</button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="product in products">
                            <td>{{product.productName}}</td>
                            <td>{{product.productType}}</td>
                            <td>${{product.productId}}</td>
                            <td>
                                <button ng-click="delete(product)" class="btn btn-warning">Delete</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

这是Controller Javascript：

<script>
        var app = angular.module('my-app', [], function () {

        });

        app.controller('AppController', function ($scope) {

            $scope.bind = function (e) {
                id = e;
                console.log(id);
            };

            $scope.products = [];

            $scope.add = function (id) {
                var newProduct = {
                    productName: id,
                    productType: id,
                    productId: 1
                };
                $scope.products.push(newProduct);
            }

            $scope.delete = function (product) {
                var index = $scope.products.indexOf(product);
                $scope.products.splice(index, 1);
            }
        });
    </script>

我的问题是当我点击任何链接时，$scope.bind函数被调用。然后在选择Link之后，单击Attach Model链接，该链接将调用$scope.add函数。我必须将链接的静态数据，即XY Graph传递给add函数，以便我可以使用ng-repeat将数据附加到表中。

有人能在我的剧本中指出这个问题吗？

Answer 1

id参数隐藏了id函数范围内的全局add()。要访问全局id，您可以省略参数。

$scope.add = function () {
    var newProduct = {
        productName: id,
        productType: id,
        productId: 1
    };
    $scope.products.push(newProduct);
}

但是，我不建议使用全局变量，因为它们可以被其他代码（包括第三方库）变异。您可以将id保留为控制器范围的属性。

$scope.bind = function (e) {
    $scope.id = e;
    console.log($scope.id);
};

$scope.add = function () {
    var newProduct = {
        productName: $scope.id,
        productType: $scope.id,
        productId: 1
    };
    $scope.products.push(newProduct);
}

传递两个范围angularjs之间的全局

1 个答案: