函数未定义在angularjs控制器内定义的函数的错误

时间:2013-07-10 03:13:37

标签: javascript angularjs angularjs-controller

我看过其他“功能未定义”的问题,但似乎找不到适用于我的用例的问题。我正在使用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>

运行时,单击复选框会导致函数未定义错误。

我在这里缺少什么?感谢。

2 个答案:

答案 0 :(得分:0)

<!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/

答案 1 :(得分:0)

如果您使用AngularJs,最好在控制器范围内定义函数。$ scope的字段可以是您的函数,而不是 onChange 您可以使用 ngChange 指令(只需要在该输入上设置ngModel。

$scope.doSomething = function() {
    alert("hello!");
}