2015-12-16 4 views
2

Название в значительной степени объясняет все это. Я привел пример из школ w3.Почему меня не сменяет событие?

<html> 
    <head> 
    <title>Example: Change event on a select</title> 
    <script type="text/javascript"> 
     function changeEventHandler(event) { 
     alert('You like ' + event.target.value + ' ice cream.'); 
     } 
    </script> 
    </head> 
    <body> 
     <label>Choose an ice cream flavor: </label> 
     <select size="1" onchange="changeEventHandler(event);"> 
      <option>chocolate</option> 
      <option>strawberry</option> 
      <option>vanilla</option> 
     </select> 
    </body> 
</html> 

Поле оповещения запускается, когда я запускаю его. Тем не менее, я не могу получить окно предупреждения всплывал, когда я запускаю мой код:

HTML

<!DOCTYPE html> 
<html lang="en-US"> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="myCtrl.js"></script> 
<body> 

<div ng-app="myTestApp" ng-controller="myCtrl"> 

    <p>Looping with ng-repeat:</p> 
    <label>Job Accounts</label> 
    <select id="jobList" size="1" ng-model="selectedJobServer" onchange="myFunction()"> 
     <option ng-repeat="x in jobServers" value="{{x}}">{{x}}</option> 
    </select> 

    <label>Oracle Accounts</label> 
    <select ng-disabled={{isDisabled}} ng-model="selectedOracleServer"> 
     <option ng-repeat="x in oracleServers" value="{{x}}">{{x}}</option> 
    </select> 

    <p>The selected server is: {{selectedJobServer}}</p> 
</div> 

</body> 
</html> 

JS

var app = angular.module('myTestApp', []); 
app.controller('myCtrl', function($scope) { 

    $scope.isDisabled = true; 

    $scope.jobServers = ['server1','server2','server3']; 

    function myFunction(){ 
     alert("Hello! I am an alert box!"); 
    } 
}); 

Есть ли какое-либо взаимодействие с углового, что бросает вопрос ? Благодарю.

+1

использовать 'нг-change' вместо' onchange' и объявить ваша функция как '$ scope.myFunction = function() {...}' Я не думаю, что DOM знает, что 'myFunction' существует, потому что он делится в угловой контроллер, который находится за пределами его области. –

ответ

3

Ваша функция должна быть в $scope.

Таким образом, вы можете изменить свой myCtrl код

$scope.myFunction = function(){ 
    alert("Hello!"); 
} 

Кроме того, вы должны изменить свое мероприятие от change к ng-change.

<select id="jobList" size="1" ng-model="selectedJobServer" ng-change="myFunction()"> 
    <option ng-repeat="x in jobServers" value="{{x}}">{{x}}</option> 
</select> 
+0

Спасибо! Мне не приходило в голову, что смешивание простого javascript с угловым будет проблемой. Как только я получу немного больше, я приму свой ответ. – jrDeveloper

+0

Спасибо! Какая бы проблема ни была, я здесь. – caballerog

1

Если вы используете угловой, обходитесь овальным с угловым. Не объявляйте общие функции, объявлять угловые функции:

$scope.myFunction = function(){ 
    alert("Hello! I am an alert box!"); 
} 

И не используйте OnChange событие, использование нг-изменение:

<select id="jobList" size="1" ng-model="selectedJobServer" ng-change="myFunction()">