Как вызвать функцию javascript и изменить переменную в угловом контроллере?

Я пытаюсь изучить angular.js. Я просто пытаюсь понять основные понятия. Я привел пример из W3Schools и попытался изменить его, чтобы отобразить переменную, которая может быть увеличена одним нажатием кнопки. Я стараюсь, чтобы различные элементы были как можно более раздельными, чтобы я мог понять, как все соединяется. Я оставил часть примера, чтобы быть уверенным, что все работает так, как предполагается. Вот мой код, который не работает.Как вызвать функцию javascript и изменить переменную в угловом контроллере?

LearningAngular.js

var myApp = angular.module("myApp", []); 
    myApp.controller("myController", myController); 

    function myController($scope) { 
     $scope.firstName = "John"; 
     $scope.counter = 0;  
    } 

function start_counting(){ 
    myController.counter ++; 
}

index.html

<!DOCTYPE html> 

<html> 
<head> 
    <title>Learning Angular</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script type="text/javascript" src="LearningAngular.js"></script> 
</head> 

<body ng-app="myApp" ng-controller="myController"> 

    First Name: <input type="text" ng-model="firstName"><br> 
    <br> 
    Full Name: {{firstName}}<br> 

    <button onclick="start_counting()">Start Counting</button><br> 
    Counter: <span>{{counter}}</span> 


</body> 
</html>

источник

2016-01-16 Per Larsen

Функция должна быть объявлена в области видимости $ прицела:

function myController($scope, $interval) { 
    $scope.firstName = "John"; 
    $scope.counter = 0;  
    $scope.start_counting = function(){ 
      $scope.counter ++; 
    }; 
    $interval(function() { 
     $scope.start_counting(); 
    }, 1000); 
}

источник

2016-01-16 15:49:45

Я дам, что попробовать] –

Это работает спасибо. Следующий вопрос: как я могу сделать эту работу с say setInterval, чтобы она автоматически увеличивала переменную. –

@PerLarsen - добавленный пример интервала, обратите внимание, что вам нужно ввести '$ interval' в функцию контроллера –

Держите все функции, необходимые в функция основного компонента. Вы должны иметь доступ к $ рамки для того, чтобы изменить вид

function myController($scope) { 
     $scope.firstName = "John"; 
     $scope.counter = 0; 

     // iniitalize counter when controller is initialized 
     start_counting(); 

     // a simple function only used in controller, not view 
     function start_counting(){ 
      $scope.counter ++; 
     }   

    }

Если вам нужно использовать эту функцию в представлении, например, в ng-click затем просто сделать:

$scope.start_counting = start_counting;// pass function reference to $scope

Не используйте onclick в представлении ... используйте ng-click, чтобы вы могли получить доступ к методам в области контроллера. onclick имеет доступ только к глобальным переменным и оконных функций ... не угловатые областью видимости те,

<button ng-click="start_counting()">Start Counting</button><br>

источник

2016-01-16 15:53:49 charlietfl

Спасибо за указание на ng-click –

просто добавленное объяснение причин – charlietfl

Как вызвать функцию javascript и изменить переменную в угловом контроллере?

ответ

Смежные вопросы