函数调用的ng-init和onload之间的区别[Angular JS]

时间:2017-01-11 05:34:02

标签: javascript angularjs html5 onload angularjs-ng-init

我正在开发一个角度应用程序,并且我希望在页面加载时关注文本字段。我已经尝试过HTML5自动对焦,但必须为此找到替代解决方案,因为同样存在浏览器兼容性问题。

我打算在页面加载时调用一个函数,该函数将关注我想要的输入字段。我有以下函数使用Angular ng-init onload 来加载函数。

我不确定在角度上下文中我应该遵循哪种方法,因为我之间的区别很小。

的onload

    <body onload="focusOnInput()">
       <form name="resetPasswordForm">
          <input name="NewPassword" type="password"/>
       </form>
    </body>
    <script>
       function focusOnInput() {
          document.forms["resetPasswordForm"]["NewPassword"].focus();
       }
    </script>

Angular ng-init

    <body in-init="focusOnInput()">
       <form name="resetPasswordForm">
          <input name="NewPassword" type="password"/>
       </form>
       <script>
          function focusOnInput() {
             document.forms["resetPasswordForm"]["NewPassword"].focus();
          }
       </script>
    </body>

1 个答案:

答案 0 :(得分:0)

onload不在您的角度上下文中。 onload函数是DOM的LOAD事件的回调函数。

你的ng-init处于角度背景中。您需要使用角度ng-init。

代码中显示的ng-init函数不会按原样运行。 ng-int中定义的函数应该在角度上下文中。你的focusOnInput()不在角度上下文中。它在javascript环境中。

如果你想使用ng-init,你需要向你的控制器注入$ window,然后使用assignOnInput赋值给你的$ scope并在ng-init中使用该方法

类似这样的事情

angular.module().controller('TestController',['$scope','$window',function($scope,$window){

 ......

 $scope.myNewFunction = $window.focusOnInput;

 ......



}])

然后在你的ng-init中使用这个myNewFunction。