0

Я ищу способ вызова функции с контроллера с параметрами в текстовом поле. Это мой 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 не знает, находится ли она в контроллереApp. Надеюсь, вы сможете мне помочь, спасибо большое.

+1

Почему бы вам не создать сервис для вашей функции и вызывать его из контроллера? – DevTrong

+0

Вы проверили консоль? Есть ошибки javascript 'Uncaught ReferenceError: d3DemoApp не определен' – Jamiec

+0

@Jamiec, да, я думал сделать это, но код, который должен быть выполнен, находится в app.js. – Anonyme

ответ

0

на 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> 
+0

Спасибо за ваш ответ, но это не решит проблему. – Anonyme

+0

Какая ошибка. Я редактирую live на вашем plunkr, он работает. – mtamma

+0

Спасибо за ваш ответ, я отредактировал мой вопрос, потому что он не решает мою проблему. Большое спасибо ! – Anonyme

1

Вы сделали две ошибки в коде

  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> 

+0

Спасибо за ваш ответ, я отредактировал мой вопрос, потому что он не решает мою проблему. Большое спасибо ! – Anonyme

+0

@ afeffifari-1957 вам нужно пойти и прочитать угрюмые документы. Это работает путем инъекции зависимостей, когда один контроллер может полагаться на услугу, и сама услуга может полагаться на другие внедренные службы. Все это покрывается документами и является слишком широким, чтобы ответить здесь. – Jamiec

0

Я редактировал свой код, пожалуйста пройти через этот

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

Спасибо за ваш ответ, я отредактировал мой вопрос, потому что он не решает мою проблему. Большое спасибо ! – Anonyme