单击按钮加载数据

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

您在代码中犯了两个错误

在尝试使用模块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 个解决方案

解决方案1
1 已采纳 2016-05-17 08:35:55

解决方案2
0 2016-05-17 08:28:47

解决方案3
0 2016-05-17 08:52:44

单击按钮加载数据

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-05-17 08:35:55

解决方案2 0 2016-05-17 08:28:47

解决方案3 0 2016-05-17 08:52:44

解决方案1
1 已采纳 2016-05-17 08:35:55

解决方案2
0 2016-05-17 08:28:47

解决方案3
0 2016-05-17 08:52:44