Question

我有一个自定义指令，我希望负责显示自己的错误并最终处理自己的验证。但是，如果我在指令之外放置错误检查，它似乎才有效。有谁知道为什么会这样？

angular.module('App', [])
.controller('Ctrl', function($scope) {
    $scope.data = {
        title: 'Lorem Ipsum'
    };
})
.directive('customInput', function($compile){
    return {
      restrict: 'E',
      replace: true,
      transclude: false,
      scope: { 
        title: '=',
        formName: '@'
      },
      template: '<div><input name="custom" required ng-model="title"/>' +
        '<span ng-show="{{formName}}.custom.$error.required">Required</span>' +
        '</div>',
      link: function(scope, element, attrs, ctrl) {
      }
    }
  });

http://jsfiddle.net/N7NDb/1/

Answer 1

您的解决方案不起作用的原因是{{formName}}不应该是双花括号，而formName: '@'应该是formName: '='。深入研究为什么会这样，但这个解决方案应该有效。

Fiddle的分叉

修改 @Edminsson和此解决方案在这种情况下产生相同结果的原因如下：

此解决方案的工作原理：
在该指令中，您正在创建一个具有propety＆＃39; formName＆＃39;的隔离范围。它将被设置为属性＆＃39; form-name＆＃39;的值。 formName: '='通过属性＆＃39; form-name＆＃39;定义的名称创建与父作用域上的属性的双向绑定。因此，这允许您直接访问父作用域上的属性（在本例中为＆＃39; Ctrl＆＃39;）及其所有可用属性。这意味着对父作用域上的属性发生的任何更改都将反映在隔离的作用域上。对于此解决方案，不需要大括号，因为它不是要评估的Angular的表达式，并且您可以引用绑定到的对象上的所有属性。
< / p>

@Edminsson解决方案的工作原理
在隔离的范围内，而不是使用formName: '=' @Edminsson保留原始formName: '@'这意味着在属性formName中放置的是来自属性＆＃34; form-name＆＃34;的字符串。这就是＆＃39; @＆＃39;符号返回，无论字符串表示是在属性中声明的。完成此解决方案的下一部分是ng-form = {{formName}}的使用，Angular将其识别为表达式，并将其替换为＆＃39; formName＆＃39;中保存的值。这反过来在父作用域上创建一个属性，其名称为＆＃39; formName＆＃39;中的名称。这个新属性可以被视为＆＃34; Angular Form＆＃34;，从而具有＆＃34; Angular Form＆＃34;的所有属性。（即原始的，肮脏的，有效的）。在此Angular评估{{formName}}的第二个实例之后，当它最终写入DOM并且Angular评估该行时 <span ng-show="myForm.custom.$error.required">Required</span> in-which＆＃34; myForm＆＃34;是＆＃39; Ctrl＆＃39;上的有效属性范围。

Here是我提取所有信息的来源。

由于问题中提出的模糊要求，这两种方法都解决了问题，但随着事情变得更加复杂，这些解决方案可以以不同的方式使用。

我希望这有所帮助，并且不会太复杂或细化，不值得赞赏。

Answer 2

指令模板内部的FormController不会按照人们的预期方式运行。在这种情况下使用ng-form帮助。

template: '<div ng-form="{{formName}}"><input name="custom" required ng-model="title"/>' +
    '<span ng-show="{{formName}}.custom.$error.required">Required</span>' +
    '</div>'

Fiddle的分叉

Custom指令显示自己的错误

2 个答案: