通过ng-include将值传递给Angular控制器

Question

从服务器端代码中，我正在加载如下角度模板：

<div ng-include="'/views/signup.html'" onload="init('premium')"></div>

目前的观点如下：

<form ng-controller="AccountSignupController as controller">
</form>

控制器很简单：

function AccountSignupController($scope) {
  $scope.plan = '';
  $scope.init = function (plan) {
    $scope.plan = plan;
    console.log(plan);
  };
};

在控制台上，计划总是"未定义"。

如何通过模板将值传递给控制器？

我需要在ng-include-div上设置控制器并使用ng-init吗？

Answer 1

控制器的作用域在'ng-controller'所在的窗体内。因此$scope.init函数在该窗体内仅"可用"。

两个指令应处于同一级别。尝试将"ng controller"移动到div或将"ng init"移动到表单（如果可能的话）。

Answer 2

您正在使用controller as binding语法实例化控制器。在这种情况下，属性和函数绑定到控制器的this，而不是$scope。应该使用绑定来调用函数。

你的模板应该是：

<div ng-include="'/views/signup.html'" 
   ng-controller="AccountSignupController as controller"
   onload="controller.init('premium')"></div>

您的控制器：

function AccountSignupController() {
  var self = this;
  this.plan = '';
  this.init = function (initString) {
    self.plan = initString;
    console.log(initString);
  };
};

有关controller as binding语法的更多信息，请参阅AngularJS ngController API