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

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

Answer 1

您在代码中犯了两个错误

在尝试使用模块之前，您尚未声明模块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 2

在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>

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

单击按钮时加载数据

3 个答案: