Question

我对AngularJS相当新。我暂时想做一些简单的事情。我创建了一个包含一些文本的表格，我必须使用一个重置按钮（在我的程序中称为＆＃34; Pulisci＆＃34;）以及稍后我必须使用的一些面板。问题是，如果我调用我创建的用于重置页面的功能，则面板会神秘地停止工作。自上周以来，我一直在喋喋不休。

HTML

<!DOCTYPE html>
<html ng-app="sbi">

<head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <style>
        table,
        td {
            border-width: 2px;
            border-collapse: collapse;
            padding: 15px;
            color: #000000;
            text-align: center;
        }

        table.pos_fixed1 {
            position: relative;
            top: 30px;
            left: 10px;
        }
    </style>
</head>

<body>
    <form name="form">
        <table summary="" width="10%" class="pos_fixed1" align="center">
            <tr>
                <td>Code Subinstaller<br><input name="codeSub" type="text" ng-model="codeSub"></td>
                <td>Stato<br>
                    <select>
                    <option value="1">...</option>
                    <option value="2">WHITE LIST</option>
                    <option value="3">GRAY LIST</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Nome Sub Installer<input name="nomeSub" type="text" ng-model="nomeSub"></td>
                <td>Cognome Sub Installer<input name="cognSub" type="text" ng-model="cognSub"></td>
                <td>Codice Fiscale<input name="codFisc" type="text" ng- model="codFisc"> </td>
            </tr>
        </table><br>
        <button class="btn btn-wide btn-default.active.focus" data-ng- click="">Cerca</button>
        <button class="btn btn-wide btn-default.active.focus" data-ng- click="reset()">Pulisci</button>
    </form><br><br>
    <section ng-controller="PanelController as panel">
        <ul class="nav nav-pills">
            <li ng-class="{ active:panel.isSelected(1) }"> <a href ng- click="panel.selectTab(1)">Description</a></li>
            <li ng-class="{ active:panel.isSelected(2) }"> <a href ng- click="panel.selectTab(2)">Specifications</a></li>
            <li ng-class="{ active:panel.isSelected(3) }"> <a href ng- click="panel.selectTab(3)">Reviews</a></li>
        </ul>

        <div class="panel" ng-show="panel.isSelected(1)">
            <h4>Description </h4>
            <p>wtf</p>
        </div>
        <div class="panel" ng-show="panel.isSelected(2)">
            <h4>Idk</h4>
            <p>Idc</p>
        </div>
        <div class="panel" ng-show="panel.isSelected(3)">
            <h4>APPARI</h4>
            <p>???</p>
        </div>
    </section>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="myapp.js"></script>
</body>

</html>

JS

(function() {
    var app = angular.module('sbi', []);
    app.controller('PanelController', function() {
        this.tab = 1;
        this.selectTab = function(setTab) {
            this.tab = setTab;
        };
        this.isSelected = function(checkTab) {
            return this.tab === checkTab;
        };
    });
})();

(function($scope) {
    var app = angular.module('sbi', []);

    function MyCtrl($scope) {
        $scope.reset = function() {
            $scope.requiredField = '';
        };
    };
});

如何使Reset（）和面板同时工作？

Answer 1

您已重新初始化角度模块。

初始化角度模块

var app = angular.module('sbi', []);

angular.module()中的第二个参数用于为模块注入所需的依赖项。因此应该只进行一次。

在您的代码中，您再次初始化了模块。

(function () {
    //initialization
    var app = angular.module('sbi', []);

    app.controller('PanelController', function () {
        this.tab = 1;

        this.selectTab = function (setTab) {
            this.tab = setTab;
        };
        this.isSelected = function (checkTab) {
            return this.tab === checkTab;
        };
    });
})();

(function ($scope) {

    //edit in your code
    //re-using the already initialized module
    var app = angular.module('sbi');

    function MyCtrl($scope) {

        $scope.reset = function () {
            $scope.requiredField = '';

        };
    };
});

您不应将第二个参数作为参数传递。

重复使用角度模块

var app = angular.module('sbi');

编辑：

请尝试以下代码：

(function () {
    var app = angular.module('sbi', []);

    app.controller('PanelController', ['$scope', function($scope) {
        $scope.tab = 1;

        $scope.selectTab = function (setTab) {
            $scope.tab = setTab;
        };

        $scope.isSelected = function (checkTab) {
            return $scope.tab === checkTab;
        };

        $scope.reset = function () {
            $scope.requiredField = '';
        };
    }]);
})();

Answer 2

这里有一些你明显遗漏的东西：你的reset功能被附加到......没有。

永远不会调用MyCtrl函数（来自我们已经看过的函数），并且$scope变量未注入Angular-way。实际上，这里没有任何东西是Angular方式。让我试着调整一下，这样你就能理解你的目标。

首先，正如@Akshay所提到的，angular.module('something', [])和angular.module('something')之间存在巨大差异，但他们已经在答案中指出了这一点。

然后，您的MyCtrl尚未在Angular中注册为控制器。你刚刚定义了这个函数，你错过了这些行：

var app = angular.module('sbi');

function MyCtrl($scope) {
    $scope.reset = function () {
        $scope.requiredField = '';

    };
};

// This controller will be known as 'MyCtrl'
app.controller('MyCtrl', MyCtrl);

这应该有效。请注意，您不会需要周围的(function ($scope) {...})，因为它无法正确执行。

然后，您必须告诉Angular在页面的特定部分使用该控制器：

<!-- Adding the ng-controller directive here -->
<form name="form" ng-controller="MyCtrl">
    ...
    <button class="btn btn-wide btn-default.active.focus" data-ng-click="reset()">Pulisci</button>
</form>

然后，您可以根据需要处理requiredField变量。

使用Angular JS在HTML文件中调用函数的问题

2 个答案: