Question

当我使用这个脚本时：

<script>
    function TestClick() {
        alert("Test clic");
    }
</script>

使用此HTML代码：

<div>
    <input name="BtnAddNew" type="button" value="Load all OPCVM" onclick="TestClick()" />
</div>

有效。

但是一旦我试图把所有东西放在控制器里面：

<head>
    <meta name="viewport" content="width=device-width" />

    <title>PetitsTests</title>

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/angular.js"></script>

    <script>
        var myApp= angular.module("myApp", []);

        myApp.controller('OPCVMViewModel', function ($scope, $http) {
            function TestClick() {
                alert("test clic");
            }
        }); 

    </script>
</head>

<body ng-app="myApp">
    <div ng-controller="OPCVMViewModel">
        <input name="BtnAddNew" type="button" value="Load all OPCVM" onclick="TestClick()" />
    </div>
</body>

然后我收到"TestClick is not defined"错误...

Answer 1

official docs的示例：

var myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {
    $scope.double = function(value) { return value * 2; };
}]);

简而言之，您必须将您在控制器中声明的任何功能或属性附加到$scope，以便使它们适用于您的模板/视图：

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

app.controller('OPCVMViewModel', function ($scope, $http) {
    function TestClick() {
        alert('Test click');
    }

    $scope.TestClick = TestClick;

    // or:

    $scope.TestClick = function() {
        alert('Test click');
    };
});

另外，正如JohnMoe在评论中指出的那样，您的代码中还存在其他问题。

首先，你不应该使用onclick，而是ng-click。您可以找到full list of ng directives here。

此外，建议使用controller as语法从Angular 1.2开始，即使没有它也可以使用。

而不是写下像：

app.controller('FooController', function ($scope) {
    $scope.property = 'Foo';
});

您将$scope替换为this，现在您不需要注入$scope并拥有一个类似于类的控制器：

app.controller('FooController', function () {
    this.property = 'Foo';
});

你的模板看起来像这样：

<div ng-controller="FooController as vm">
    {{ vm.property }}
</div>

如果您稍后决定创建一个指令，它将如下所示：

app.controller('FooController', function () {
    this.property = 'Foo';
});

app.directive('fooDirective', function () {
    return {
        restrict: 'E',
        controller: 'FooController',
        controllerAs: 'vm',
        template: '{{ vm.property }}'
    };
});

此外，您可以使用适当的ES6类与转换器。如果您有兴趣，请查看this

Answer 2

在您的控制器中，尝试

$scope.TestClick = function(){   alert("test click");   };

然后在按钮HTML中：

type="button" ng-click="TestClick()"

简而言之，需要在范围内定义函数。并使用ng-click调用该函数。

Angular.js中的函数未定义错误

2 个答案: