从html调用angularjs控制器中的一个函数，但未定义范围变量

call a function in angularjs controller from html and scope variable is not defined

本文关键字：函数 一个 变量 范围 未定义 angularjs 调用 html 控制器      更新时间：2024-04-12

我是angularjs的新手，需要知道如何在angularjs中从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>

这种方法是正确的吗？或者还有其他方法可以调用函数吗。同样，当init（）被调用时，作用域变量是未定义的

$scope.init = function () {
      alert($scope.model.name); // it displays undefined
    };

任何帮助都非常感谢

ngInit指令用于运行表达式并分配范围变量。文档中有一个关于使用它的好警告：

此指令可能会被滥用，从而在模板中添加不必要的逻辑量。ngInit只有一些适当的用途，例如用于混淆ngRepeat的特殊属性，如下面的演示所示；以及用于经由服务器端脚本注入数据。除了这几种情况外，您应该使用控制器而不是ngInit来初始化作用域上的值。

https://docs.angularjs.org/api/ng/directive/ngInit

与其使用ngInit，我建议在控制器中运行函数：

controllerFunction($scope) {
    $scope.someFunction = someboundfunction;
    //etc...
    activate();
    function activate() {
        // do some activation stuff
    }
    function someboundfunction() {
        //...
    }
}

将可绑定成员放在顶部的编码风格，使我在编写具有激活逻辑的大型控制器时不会发疯。如果你对此感兴趣的话，它就在这里。

欢迎来到AngularJS的神奇世界。Angular一开始可能有点势不可挡，但不要放弃。你正朝着正确的方向前进。

对您编写的代码的一些建议--您需要将完整的代码封装在控制器中，以便能够处理进出控制器的数据。-我假设你已经使用ng app或其他ng someName初始化了你的应用程序-由于ng-init用于初始化一个参数/方法，因此您不需要在代码中提及它$scope会自动处理它（这很酷，对吧！）

因此，在实现上述建议后，您的代码将类似于下面的内容-//html代码

｛｛用户名｝｝

//angular.js
 app.controller('formCtrl', function($scope) {
    $scope.Username = '';
 });

让魔法开始吧！）

您需要将想要使用的东西放在这个控制器中以使其工作。

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>

相关文章：