单击按钮时加载数据

Load data when click on button

本文关键字：数据 加载 按钮 单击      更新时间：2023-09-26

我正在搜索如何使用文本框中的参数从控制器调用函数。这是我的HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="controllerInput.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-app="appName">
    <input type="text" id="idName" name="idName" ng-model="modelName" ng-controller="controllerName">
    <button class="btn btn-default" ng-click="functionName()">Execute</button>
  </body>
</html>

这是控制器：

d3DemoApp.controller('controllerName',function($rootScope,$scope) {
    $scope.modelName = '';
    $scope.functionName = function () {
        myFunction($scope.modelName);
    };
});

和app.js:

function myFunction(concatURL){
    //loadData('URL' + concatURL);
    console.log("Function successfully called !");
}

问题出在我的应用程序文件上，我有一个必须调用的函数loadData，但它在一个名为controllerApp的控制器中，而我的函数myFunction不知道它是否在controllerApp中。希望你能帮助我，非常感谢。

您在代码中犯了两个错误

  1. 在尝试使用模块appName之前，您尚未声明该模块
  2. 您只将ng-controller应用于输入元素，而不是同时包含输入和按钮的元素

要修复第一个问题，在尝试使用模块之前需要这条线：

var variableName = angular.module("appName",[]);

要修复第二个，请向上移动ng-controller元素：

<body ng-app="appName" ng-controller="controllerName">
    <input type="text" id="idName" name="idName" ng-model="modelName">
   <button class="btn btn-default" ng-click="functionName()">Execute</button>
</body>
JS文件（控制器）上的

将其添加到标题上

var d3DemoApp = angular.module('D3demoApp', []);

在html文件中，尝试将控制器包装成div

<body ng-app="D3demoApp">
  <div ng-controller="controllerFilterSearch">
    <input type="text" id="searchTextBox" name="searchTextBox" ng-model="searchText">
    <button class="btn btn-default" ng-click="getSearchText()">Rechercher</button>
  </div>
</body>

我已经编辑了你的代码，请浏览这个

<body ng-app="mainApp" >
    <div ng-controller="controllerFilterSearch">
        <input type="text" id="searchTextBox" name="searchTextBox" ng-model="searchText" >
        <button class="btn btn-default" ng-click="getSearchText()">Rechercher</button>
    </div>
</body>

JS-

var d3DemoApp = angular.module("mainApp",  []);
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope) {
    $scope.searchText = '';
    $scope.getSearchText = function () {
        alert();
        myFunction($scope.searchText);
    };
});
相关文章：