功能不Angular.js

定義的錯誤，當我使用這個腳本：功能不Angular.js

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

然後我從official docs一個"TestClick is not defined"錯誤...

來源

2017-05-31 John Moe

有沒有人解決你的問題？如果是這樣，請您接受最好的答案（點擊下面的選中標記）。這將有助於其他遇到您的問題的用戶迅速找到接受的答案，並且還會給出15個代表。指向作者（： – Danziger

例子：

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

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

總之，您必須將您在控制器中聲明的任何功能或屬性附加到$scope以使它們對您的模板無效/ view：

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。

此外，從Angular 1.2開始，推薦使用controller as語法，即使它在沒有它的情況下也能正常工作。

而不是寫類似的：

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班級，transpiler。看看this如果你有興趣

來源

2017-05-31 19:07:12 Danziger

我會upvote，但'controller as'語法應該用於'$ scope'贊成 – mhodges

我用下面的代碼替換我的代碼： var myApp = angular.module（「myApp」，[]） ; myApp.controller（ 'OPCVMViewModel'，[ '$範圍'，函數（$範圍）{ $ scope.TestClick =函數TestClick（）{ 警報（「測試CLIC」）;} } ]）; 但是我仍然得到相同的錯誤 –

@JohnMoe在DOM中應該是'ng-click =「...」'，而不是'onclick =「...」'Angular不會劫持原生onclick屬性/功能，而是有它自己的。 – mhodges

在你的控制，儘量

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

然後在按鈕HTML：

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

總之，功能需要對範圍進行界定。並使用ng-click來調用該函數。

來源

2017-05-31 19:13:28

功能不Angular.js

回答

相關問題