Question

JSFiddle就在这里：

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

我需要能够动态地从指令填充字段：

 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中可以看出，这些事情目前都没有发生，我不确定为什么......

谢谢！

Answer 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。

在指令中填充文本框ng属性

1 个答案: