0

JSFiddle 在这里：

http://jsfiddle.net/DfLdF/

问题描述如下，我有一个控制器包装了一个包含一些逻辑的表单，并且不能在指令哈希中定义为控制器：

我需要能够从指令中动态填充字段，如下所示：

 App.Directive.SomeAwesomeDirective = ->
     restrict: 'C'

     link: (scope, element, attrs) ->
         someValue = scope.someValue
         field = element.find(".some-class")
         scope.fieldValue = someValue
         field.ngModel = "scope.fieldValue"
         field.ngClass = "scope.someAwesomeClass"

         monitorFields = (newValue, oldValue) ->
              console.log "we are here"
              console.debug newValue
              console.debug oldValue
              scope.addValue(newValue)

         scope.$watch "scope.fieldValue", monitorFields, true

我需要满足以下条件：

1) 当 textfields 值改变时，我希望 scope.fieldValue 被更新。2) 发生这种情况后，我希望使用新值调用 addValue 方法（在包装控制器上定义）以进行验证。3) addValue 方法应该设置 someAwesomeClass 范围变量，并且输入字段类应该更新。4) 要应用的 ngClasses 是 ng-valid/ng-invalid。表单验证应该与这些类对应地正确运行

从我的 jsfiddle 中可以看出，这些事情目前都没有发生，我不确定为什么......

谢谢！

4

1 回答 1

1

您可以通过定义一个指令来修复它，该指令someClass将在其父级上执行该函数。该form标签有一个额外的属性execute，它保存要执行的函数。该someClass指令将搜索指令的控制器dir（因此需要：'^dir'）并执行它。

另一种解决方案是删除dir指令并在指令上定义execute属性someClass（例如，当每个输入字段应该触发不同的功能时）。

<form class="dir" execute="someFunction">

指令：

app.directive('dir', function () {
  return {
    restrict: 'C',
    scope: {
      execute: '='
    },
    controller: function ($scope) {
      this.execute = $scope.execute;
    }
  };
});


app.directive('someClass', function () {
  return {
    restrict: 'C',
    require: '^dir',
    replace: true,
    template: '<INPUT name="foo" id="bar" type="text" ng-model="fieldValue" >',
    scope: {
      fieldValue: '@'
    },
    link: function (scope, elm, attrs, ctrl) {
      var monitorField = function (newValue, oldValue) {
        if (newValue) {
           ctrl.execute(newValue);
        }
      };
      scope.$watch("fieldValue", monitorField, true);
    }
  };
});

请参阅jsFiddle。

于 2013-01-09T09:32:04.537 回答