Ошибка функции не определена для функции, определенной внутри контроллера angularjs

Я просмотрел другие вопросы «функция не определена», но не могу найти тот, который применим к моему варианту использования. Я использую angular.js.

У меня есть изначально пустой div, #mylist, который я динамически заполняю в js. У меня есть функция, определенная внутри контроллера, которую я назначаю событию onChange флажка.

Вот полный документ:

<!doctype html>
<html data-ng-app="testapp">
<head>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="angular.min.js"></script>
    <script>
        var app = angular.module("testapp", []);        
        app.controller("MyAppController", function ($scope) {
            createCheckbox();

            function doSomething() {
                alert("hello!");
            }

            function createCheckbox() {
                $("#mylist").html("<input type='checkbox' onChange='javascript:doSomething();' />");
            }       
        });
    </script>
</head>

<body data-ng-controller="MyAppController">
    <div id="mylist"></div>
</body>
</html>

При запуске установка флажка приводит к ошибке «функция не определена».

Что мне здесь не хватает? Спасибо.


javascript angularjs angularjs-controller
person Steven    schedule 10.07.2013    source источник
comment
Я думаю, что некоторое перефразирование «Ты делаешь это неправильно» - это наиболее распространенная вещь, которую говорят в дискуссиях об угловатости (и обычно это правда). Так что в принципе вы не должны использовать jQuery для захвата элемента в DOM... одну секунду думаю, что я могу ответить довольно легко.   -  person shaunhusain    schedule 10.07.2013
comment
В настоящее время я использую angular только для маршрутизации. Очевидно, что я не продвинутый разработчик js, и я не мог сказать, была ли ошибка связана с angular, jq или простым js. Я думаю, что разумно обратиться за помощью в этот момент, чтобы вести меня в направлении.   -  person Steven    schedule 10.07.2013
comment
@ Стивен, я не хотел быть унизительным / грубым, просто сказал, что недавно слышал что-то в этом роде, и фразу угловатую, которая звучит как культ. Я тоже не эксперт по JS, но сразу перешел с AS3/Flex на AngularJS. jQuery всегда казался мне немного запутанным (не то, чтобы Angular был сплошь леденцами, но он кажется более организованным и гораздо менее подверженным ошибкам). Во всяком случае, надеюсь, что мой ответ имеет какой-то смысл, в основном я использую привязку для запуска функции, которая наблюдает за этой переменной, поэтому, когда она изменяется, я запускаю функцию.   -  person shaunhusain    schedule 10.07.2013
comment
@shaunhusain, извините, я должен был специально направить мой комментарий. Я отвечал не вам, я отвечал Чандермани. Я ценю вашу помощь.   -  person Steven    schedule 10.07.2013

Ответы (2)


arrow_upward
0
arrow_downward 

<!doctype html>
<html data-ng-app="testapp">
<head>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="angular.min.js"></script>
    <script>

var app = angular.module("testapp", []);

app.controller("MyAppController", function ($scope) {
    $scope.someProperty = true;


    $scope.$watch("someProperty", function (someProperty){
       alert("hello!"+someProperty)
     });
});

    </script>
</head>
<body data-ng-controller="MyAppController">
    <div id="mylist"><input type="checkbox" ng-model="someProperty"/></div>
</body>

</body>
</html>

http://jsfiddle.net/y6XhY/

person shaunhusain    schedule 10.07.2013
comment
Спасибо за сборку рабочего образца. Я посмотрю на это. - person Steven; 10.07.2013
comment
о, также в этом случае (с флажком) вы можете просто использовать ng-click для вызова функции в пределах области видимости из HTML, например ng-click=doSomething() (или для флажка, я думаю, ng-change=doSomething()) Сначала я показывал просмотр версии свойства, думая о тексте типа ввода. - person shaunhusain; 10.07.2013

arrow_upward
0
arrow_downward

Если вы используете AngularJs, рекомендуется определить функцию внутри области вашего контроллера. Поле $scope может быть вашей функцией, и вместо onChange вы можете использовать директиву ngChange (только у вас есть чтобы установить ngModel на этом входе).

$scope.doSomething = function() {
    alert("hello!");
}
person Hazarapet Tunanyan    schedule 12.08.2015