从html调用angularjs控制器中的函数，并且未定义范围变量
[英]call a function in angularjs controller from html and scope variable is not defined
问题描述
I am a newbie in angularjs and need to know how to call a function which is define in controller from html in angularjs 
我是angularjs的新手，需要知道如何从angularjs的html中调用在控制器中定义的函数
I have wrote a code html 我写了一个代码html
First.html
<input type="text" ng-model="model.name" name="name" />
Second.html
<p g-bind-template>{{model.familyname}}</p> // it displays the value
<div data-ng-controller="formCtrl" data-ng-init="init()">
</div>
Is this way is correct or is there any other way to call a function. 这种方法是正确的还是有其他方法可以调用函数。 Also when init() is called scope variable is undefined 同样在调用init（）时，范围变量未定义
$scope.init = function () {
alert($scope.model.name); // it displays undefined
};
Any help is very much appreciated 很感谢任何形式的帮助
3 个解决方案
解决方案1
0 2016-04-08 22:10:57
ngInit directive is meant to run an expression and assign a scope variable. ngInit指令用于运行表达式并分配作用域变量。 There is a nice warning in the docs about using it: 在文档中有一个关于使用它的好警告：
This directive can be abused to add unnecessary amounts of logic into your templates.
https://docs.angularjs.org/api/ng/directive/ngInit https://docs.angularjs.org/api/ng/directive/ngInit
Instead of using ngInit, I would suggest running the function in the controller: 建议不要在控制器中运行该功能，而不要使用ngInit：
controllerFunction($scope) {
$scope.someFunction = someboundfunction;
//etc...
activate();
function activate() {
// do some activation stuff
}
function someboundfunction() {
//...
}
}
The coding style of placing bindable members at the top, keeps me from going crazy when writing big controllers that have activation logic. 将可绑定成员放在顶部的编码风格使我在编写具有激活逻辑的大型控制器时不会发疯。 It's here , if you're interested in that. 如果您对此感兴趣，就在这里 。
解决方案2
0 2016-04-08 22:17:05
You need to keep things you want to use inside this controller to make it worked. 您需要将要使用的东西保留在此控制器中，以使其正常工作。
angular.module('TestApp', []); angular.module('TestApp') .controller('formCtrl', ['$scope', '$window', function($scope, $window) { $scope.model = { name: 'Default name' }; $scope.alertName = function(where) { alert(where + ': ' + $scope.model.name); }; $window.onload = function() { // will be called after ng-init $scope.alertName('On Load'); }; // call it directly from controller $scope.alertName('From controller'); }]);
<html ng-app="TestApp" ng-controller="formCtrl" ng-init="alertName('Ng-init')"> <head></head> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div> <input type="text" ng-model="model.name" /> <button ng-click="alertName()">Alert this name</button> <p>{{ model.name }}</p> </div> </body> </html>
解决方案3
0 2016-04-08 22:22:58
Welcome to the magical world of AngularJS. 欢迎来到AngularJS的神奇世界。 Angular could be a little overwhelming at first, but don't give up. 刚开始时Angular可能会有点让人不知所措，但不要放弃。 You're going in the right direction. 您朝着正确的方向前进。
A few suggestions for the code you have written - - You need to encapsulate your complete code inside the controller to be able to process data to and from it. 有关您编写的代码的一些建议--您需要将完整的代码封装在控制器内部，以便能够处理往返于其的数据。 - I am assuming you already have initialized your app using ng-app or some other ng-someName - Since, ng-init is used to initialize a parameter/method, you don't need to mention it as such in your code. -我假设您已经使用ng-app或其他一些ng-someName初始化了您的应用程序-由于ng-init用于初始化参数/方法，因此您无需在代码中提及它。 $scope will take care of it automatically (It's cool, right!) $ scope会自动处理它（很酷，对！）
So your code would look like something below after implementing the suggestions above - //html code 因此，在实现上述建议之后，您的代码看起来像下面的东西-// html代码
{{ Username }} {{ 用户名 }}
//angular.js
app.controller('formCtrl', function($scope) {
$scope.Username = '';
});
Let the magic begin! 让魔术开始吧！ ;) ;）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.