Question

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

    };

非常感谢任何帮助

Answer 1

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() {
        //...
    }
}

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

Answer 2

您需要在此控制器中保留要使用的内容才能使其正常工作。

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>

Answer 3

欢迎来到AngularJS的神奇世界。 Angular起初可能有点压倒性，但不要放弃。你正朝着正确的方向前进。

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

因此，在执行上述建议后，您的代码将如下所示 - // HTML代码

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

让魔法开始吧！ ;）

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

3 个答案: