我想检查一个角度控制器内的表格是否有效.使用$ scope时这似乎很简单,但是我无法使用'controller as'语法.
当我尝试访问表单时.$ valid我收到错误消息"无法读取属性'$ valid'of undefined".
plunkr:http://plnkr.co/edit/w54i1bZVD8UMhxB4L2JX？p = preview
HTML
<div ng-app="demoControllerAs" ng-controller="MainController as main">
<form name="contactForm" novalidate>
<p>
<label>Email</label>
<input type="email" name="email" ng-model="main.email" required />
</p>
<p>
<label>Message</label>
<textarea name="message" ng-model="main.message" required></textarea>
</p>
<input type="submit" value="submit" ng-click="main.submit()" />
</form>
</div>
JS
var app = angular.module('demoControllerAs', []);
app.controller('MainController', [function () {
var main = this;
main.submit = function () {
var isValid = main.contactForm.$valid;
console.log(isValid);
};
}]);
场景:
假设我想创建一个drop in组件,它基本上是一个需要从用户那里获取一些输入,验证并将其保存在服务器上的表单.我需要公开一些回调,以便指令的用户可以根据服务器响应或用户单击取消按钮来执行他所需的操作.我希望这是一个元素指令<new-product-widget></new-product-widget>.现在我该怎么做呢？从我的角度来看,我可以简单地隔离指令的范围,并接受来自封闭控制器的函数作为属性; 例如:
<new-product-widget on-success="ctrl.onAddSuccess" on-error="ctrl.onAddError" on-cancel="ctrl.onAddCancel" on-invalid="ctrl.onAddInvalid"></new-product-widget>
然后在我的链接功能中使用它们.然而通过指令文档会后,我认为这是一个更好的方式来做到这一点使用 bindToController,controller,controllerAs和require选项.但是我很困惑如何使用这些功能以及它将提供的确切好处来重写它.任何通过示例解释这些内容的博客/视频链接都将是一个很大的帮助.
请阅读原始描述,它可以帮助您理解我的困惑.
原始描述.
我想编写孤立的可共享指令(组件).角度文档表明这些选项是相关的.
我的理解:
Controller允许我定义一个控制器构造函数.(这给了我什么特殊的权力.我应该做什么/不做什么)ControllerAs允许指令范围内的控制器的别名.(为什么我需要访问构造函数？我应该手动实例化它)Requireangular doc说 - 需要另一个指令并将其控制器作为链接函数的第四个参数注入. (呃......？为什么？怎么样？)bindToControllerangular doc说 - 当一个组件使用隔离范围(见上文)并使用controllerAs时,bindToController: true将允许组件将其属性绑定到控制器,而不是范围.在实例化控制器时,隔离范围绑定的初始值已经可用.(我根本不明白这个选项.)你能用一个例子来解释如何一起使用这些选项以及它们允许我实现哪些我无法使用链接功能？我很迷茫.
我正在使用角度版本1.4.x.
[Angular Doc我读过.] [1]
[1]:https://code.angularjs.org/1.4.7/docs/api/ng/service/ $ compile
this任何人都可以向我解释以下场景吗？
ng-controller="Parent as thus"
ng-controller="Parent as this"
使它成为关键字的单个字母 - 我想要 - 破坏了森林。
为什么是这样？
PS 我知道这个vm约定，但我发现它干扰了控制器/视图模型的可移植性。