Question

我对Angular指令有疑问。以下是我的代码：

主控制器＆amp;指令：

<div ng-controller='ShopsController'>
    <update-createform shop="shop" action='update()'></update-createform>
</div>

指令js：（这样方向动作将采用'action'输入参数）

angular.module('app')
.directive('updateCreateform', function(){
  return {
    templateUrl: '/form.html', 
    restrict : 'E', 
    scope: {
        shop: '=', 
        action: '&'
    }
  }
})

form.html模板：

<form name="shopForm" ng-submit='action(shopForm.$valid)' novalidate>
<input type='text' name='name' required/>
<input type='text' name='description' required/>
</form>

ShopsController有一个方法：

exports.update = function(isValid) {
    if (isValid) { /* update the shop*/ }
}

我正在做的是我传递从服务器获得的商店数据，将其发送到表单中，以便查看和/或更新商店信息。

我还希望使用相同的表单创建商店信息。在这种情况下，我只是发送shop = []和action ='create（）'。

我的控制器有一个更新方法，它接受参数isValid。我不知道如何传递指令shopForm。$ valid在外面并将其发送到服务器。

两个问题：

如何从指令中获取 isValid 变量？
关注Ari Lerner的ng-book：他说可以做以下事情：

http://www.scribd.com/doc/215682987/NG-Book-The-Complete-Book-on-AngularJS-2013

而不是使用上面的指令我们使用

<update-createform shop="shop" on-update='update()' on-create='create()'></update-createform>

当商店不为空时，指令'action'将变为'update'，否则action等于'create'？我尝试了他的代码，但我无法让它工作..

非常感谢任何帮助！

Answer 1

您可以向action=update(isValid)添加参数。然后在表单提交中解决此问题。

所以你的HTML看起来像这样

<div ng-controller='ShopsController as shopCtrl'>
  <update-createform shop="shop" action='shopCtrl.update(isValid)'></update-createform>
</div>

你的表格看起来像这样

<form name="shopForm" ng-submit='action({isValid:shopForm.$valid})' novalidate>
    <input type='text' name='name' required/>
    <input type='text' name='description' required/>
    <button type="submit">Submit</button>
</form>

和控制器将是

.controller('ShopsController', function() {

  var exports = this;

  exports.update = function(isValid) {
    console.log(isValid)
    if (isValid) { /* update the shop*/ }
  }
})

http://plnkr.co/edit/Qh3HzKGnOo1NTP9Pfsmh?p=preview

或

还有另一种方式，虽然我个人觉得语法有点奇怪。并不是说第一个解决方案也很直观。

http://plnkr.co/edit/CRN9ruRekJiozJIBTe80?p=preview

在Dan Wahlin的一篇关于指令的优秀文章中找到了一篇

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters

具有自定义/条件操作的Angular指令

1 个答案: