单击按钮时加载数据答案

【问题标题】：Load data when click on button单击按钮时加载数据
【发布时间】：2016-05-17 08:24:16
【问题描述】：

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

【问题讨论】：

为什么不为你的函数创建一个服务并从控制器调用它？
你检查你的控制台了吗？有 javascript 错误Uncaught ReferenceError: d3DemoApp is not defined
@Jamiec，是的，我想这样做，但必须执行的代码在 app.js 中。
plnkr.co/edit/PtLeM7ynNbsKMNfLwIb0?p=preview 请通过这个

标签： javascript angularjs function angularjs-scope angular-controller

【解决方案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>

【讨论】：

感谢您的回复，我编辑了我的问题，因为它不能解决我的问题。非常感谢！
@afeffifari-1957 你需要去阅读 Angular 文档。这是通过依赖注入来实现的，其中一个控制器可以依赖于服务，而该服务本身可以依赖于其他注入的服务，这在文档中都有所涵盖，并且过于宽泛，无法在这里回答。

【解决方案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>

【讨论】：

感谢您的回复，但并没有解决问题。
错误是什么。我在你的 plunkr 上实时编辑，它确实有效。
感谢您的回复，我编辑了我的问题，因为它不能解决我的问题。非常感谢！

【解决方案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>

var d3DemoApp = angular.module("mainApp",  []);

d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope) {
    $scope.searchText = '';
    $scope.getSearchText = function () {
        alert();
        myFunction($scope.searchText);
    };
});

【讨论】：

感谢您的回复，我编辑了我的问题，因为它不能解决我的问题。非常感谢！