单击按钮时加载数据

Question

我正在搜索如何使用文本框中的参数从控制器调用函数。这是我的 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 中。希望大家能帮帮我，非常感谢

Answer 1

在 JS 文件（控制器）上添加这个 header

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>

Answer 2

你的代码有两个错误

您在尝试使用模块 appName 之前没有声明它。
您仅将 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>

Answer 3

我已经编辑了你的代码，请仔细阅读

<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);
    };
});

单击按钮时加载数据

Load data when click on button

javascript

angularjs

function

angularjs-scope

angular-controller