Javascript 页面加载调用函数上的Angularjs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27194805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs on page load call function
提问by asdfkjasdfjk
I am learning AngularJS. I have some article tag and on clicking on a button each article page is showed without any page refresh. This is one page website. What I want is that when article id "showSelector" is loaded I want to call myFunction()and in this function I want to show an alert. But the alert is not showing.
我正在学习AngularJS。我有一些文章标签，点击一个按钮，每个文章页面都会显示，没有任何页面刷新。这是一页网站。我想要的是，当文章 id "showSelector" 加载时，我想调用myFunction()并且在这个函数中我想显示一个警报。但是警报没有显示。
How can I do that?
我怎样才能做到这一点？
<article id="showSelector" class="panel" ng-controller="CinemaCtrl" onload="myFunction()">
<header>
<a ng-click="back()" class="icon fa-arrow-circle-left"></a><h2>Shows in {{getSelectedCinema()}}</h2>
</header>
<p>
These shows are played in our single room theatre. Select one to reserce a ticket for it.
</p>
<section>
<div class="row">
<div class="4u" ng-repeat="show in shows">
<div class="movieCard">
<a ng-click="selectShow(show)"></a>
<h3>{{show.nameOfShow}}</h3>
<h4>{{show.timeOfShow | date:'MMM d'}}</h4>
<h4>{{show.timeOfShow | date:'HH:mm'}}</h4>
<p>Free seats: {{show.reservations | freeSeatFilter}}</p>
</div>
</div>
</div>
</section>
<script>
function myFunction() {
alert("Page is loaded");
};
</script>
</article>
回答by James Gaunt
You should call this function from the controller.
您应该从控制器调用此函数。
angular.module('App', [])
.controller('CinemaCtrl', ['$scope', function($scope) {
myFunction();
}]);
Even with normal javascript/html your function won't run on page load as all your are doing is defining the function, you never call it. This is really nothing to do with angular, but since you're using angular the above would be the "angular way" to invoke the function.
即使使用普通的 javascript/html，您的函数也不会在页面加载时运行，因为您所做的只是定义函数，您永远不会调用它。这实际上与 angular 无关，但是由于您使用的是 angular，因此上述将是调用该函数的“角度方式”。
Obviously better still declare the function in the controller too.
显然最好还是在控制器中声明函数。
Edit:Actually I see your "onload" - that won't get called as angular injects the HTML into the DOM. The html is never "loaded" (or the page is only loaded once).
编辑：实际上我看到了你的“onload”——它不会被调用，因为 angular 将 HTML 注入到 DOM 中。html 永远不会“加载”（或者页面只加载一次）。
回答by Scott McDermid
Instead of using onload, use Angular's ng-init.
使用 Angular 的ng-init.
<article id="showSelector" ng-controller="CinemaCtrl" ng-init="myFunction()">
<article id="showSelector" ng-controller="CinemaCtrl" ng-init="myFunction()">
Note:This requires that myFunction is a property of the CinemaCtrlscope.
注意：这要求 myFunction 是CinemaCtrl作用域的一个属性。
回答by Jijo Paulose
<section ng-controller="testController as ctrl" class="test_cls" data-ng-init="fn_load()">
$scope.fn_load = function () {
console.log("page load")
};
回答by Антон Брагин
It's not the angular way, remove the function from html body and use it in controller, or use
这不是角度方式，从 html body 中删除函数并在控制器中使用它，或者使用
angular.element(document).ready
More details are available here: https://stackoverflow.com/a/18646795/4301583
此处提供更多详细信息：https: //stackoverflow.com/a/18646795/4301583
回答by Ravi Mittal
you can also use the below code.
您也可以使用以下代码。
function activateController(){
console.log('HELLO WORLD');
}
$scope.$on('$viewContentLoaded', function ($evt, data) {
activateController();
});
回答by Manzoor Samad
you can use it directly with $scope instance
您可以直接将它与 $scope 实例一起使用
$scope.init=function()
{
console.log("entered");
data={};
/*do whatever you want such as initialising scope variable,
using $http instance etcc..*/
}
//simple call init function on controller
$scope.init();
回答by Ashish Yadav
var someVr= element[0].querySelector('#showSelector');
myfunction(){
alert("hi");
}
angular.element(someVr).ready(function () {
myfunction();
});
This will do the job.
这将完成工作。
