Angular ng-init将值从一个函数传递给另一个函数

时间:2016-09-20 08:01:41

标签: angularjs

我在html视图中有两个函数ng-init="function1(); function2();"

我需要从函数1到函数2获取一个值。 我需要将值传递给该函数,如下所示: function2(val);

有没有办法做到这一点?

2 个答案:

答案 0 :(得分:1)

尝试将all包装在一个函数中,如下所示:

ng-init="init();"

并在您的控制器中:

$scope.init = function(){
   var returnValue = function1();
   function2(returnValue);       
}

尽量避免在HTML中插入复杂的代码。这是一种不好的做法,可以通过有效使用控制器来避免。

答案 1 :(得分:0)

这会导致编码不良,难以维持加班。

回答你的问题,以便在给你正确的方法之前知道。

您可以ng-init="function2(function1())"

执行此操作

示例(不良方法)

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  vm.function1 = function1;
  vm.function2 = function2;
  
  function function1() {
    return 'Hello, ';
  }
  
  function function2(param) {
    vm.message = param + 'World!';
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div ng-init="ctrl.function2(ctrl.function1())">
      <span ng-bind="ctrl.message"></span>
    </div>
  </div>
</div>

示例(好方法)

所有的初始化都应该在控制器本身完成,并且最好也不要调用ng-init指令,因为它会降低代码的可读性,因为一些调用是从视图完成的,而一些是来自控制器的视图应该只绑定数据或格式化数据以将其显示给用户。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  init();
  
  function preInit() {
    return 'Hello, ';
  }
  
  function init() {
    var text = preInit();
    vm.message = text + 'You!';
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <span ng-bind="ctrl.message"></span>
  </div>
</div>

更新

如果您的function1返回Array,那么您需要知道要访问的元素的索引号。

检查下面的示例我已经将ng-init指令中的索引硬编码为1,您可以用适当的索引号替换它以访问您想要的元素。如果你没有索引号,那么尝试将值与键值相匹配,方法是将值传递给function1Array根据你的需要只返回angular .module('demo', []) .controller('DefaultController', DefaultController); function DefaultController() { var vm = this; vm.function1 = function1; vm.function2 = function2; function function1() { return [ { id: 1, name: 'Batman' }, { id: 2, name: 'Superman' }, { id: 3, name: 'Spiderman' } ]; } function function2(param) { vm.message = 'Hello, ' + param + '!'; } }中匹配元素的属性

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div ng-init="ctrl.function2(ctrl.function1()[1].name)">
      <span ng-bind="ctrl.message"></span>
    </div>
  </div>
</div>
{{1}}

我的建议:即使其他人编写了该代码,我建议您继续进行更改,以便在需要时更好,更轻松地维护和添加复杂逻辑。例如,如果您没有要从Array访问的元素的索引号,并且您必须循环遍历元素以使其与特定键/属性值匹配,那么您将需要一个适合于写在控制器本身。